概述
有时,行绑定到数据对象,其中包含的信息比普通表格上容易的容易更多.
在这些情况下,您可能需要使用wijmo.grid.detail模块附带的FlexGridDetailProvider类.
FlexGridDetailProvider通过将折叠/展开按钮添加到行标题来扩展FlexGrid,以及createDetailCell方法,可用于提供有关项目的其他详细信息。 当详细信息被展开时,详细信息将显示在添加到网格的“详细信息行”中,并在其折叠时将其删除.
本次我们主要去服务器端数据:
数据分为部门名称,和部门员工来做主细表
首先,我们给主表绑定部门数据
主要是分页,分页大小为4,数据为json格式,并且,主表含有模板列:
1: var mainView =
2: new wijmo.collections.CollectionView(null, {
3: pageSize: 4,
4: pageChanged: updateCurrentPageOd
5: });
6: // populate it with data from a server
7: var url2 = "wijmo5/dept.json";
8: wijmo.httpRequest(url2, {
9: // data: params,
10: success: function(xhr) {
11: // got the data, assign it to the CollectionView
12: var response = JSON.parse(xhr.response);
13: var data = response.d ? response.d.results : response.data;
14: // use the result as the sourceCollection
15: mainView.sourceCollection = data;
16: mainView.onPageChanged();
17: }
18: });
19: // update pager status
20: function updateCurrentPageOd() {
21: var curr = wijmo.format('页 {index:n0} / {cnt:n0}', {
22: index: mainView.pageIndex + 1,
23: cnt: mainView.pageCount
24: });
25: document.getElementById('spanCurrentMain').textContent = curr;
26: }
27: // implement pager
28: document.getElementById('pagerMain').addEventListener('click', function(e) {
29: var btn = wijmo.closest(e.target, 'button');
30: var id = btn ? btn.id : '';
31: switch (id) {
32: case 'btnFirstMain':
33: mainView.moveToFirstPage();
34: break;
35: case 'btnPrevMain':
36: mainView.moveToPreviousPage();
37: break;
38: case 'btnNextMain':
39: mainView.moveToNextPage();
40: break;
41: case 'btnLastMain':
42: mainView.moveToLastPage();
43: break;
44: }
45: });
46:
47: // shared column definitions
48: var mainColumns = [{
49: binding: 'deptId',
50: header: '部门ID',
51: width: '*',
52: aggregate: 'Sum',
53: isReadOnly:true
54: }, {
55: binding: 'name',
56: header: '部门名称',
57: width: '2*',
58: isReadOnly:true
59: },{
60: binding: 'active',
61: header: '状态',
62: width: '*'
63: },{
64: binding: 'options',
65: header: '操作',
66: width: 130,
67: isReadOnly: true
68: }];
69:
70: var theTemplate = '<a href="www.baidu.com/?id={deptId}">' +
71: '编辑</a>';
72:
73: var detailColumns = [{
74: header: '人员ID',
75: binding: 'empId',
76: aggregate: 'Sum'
77: }, {
78: header: '人员',
79: binding: 'firstname'
80: }];
81: var mainGrid = new wijmo.grid.FlexGrid('#mainGrid', {
82: autoGenerateColumns: false,
83: columns: mainColumns,
84: itemsSource: mainView,
85: selectionMode: 'ListBox',
86: formatItem: function(s, e) {
87: if (e.panel == s.topLeftCells) {
88: e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
89: }
90:
91: if (e.panel == s.cells && s.columns[e.col].binding == 'options') {
92: var item = s.rows[e.row].dataItem,
93: html = wijmo.format(theTemplate, item);
94: e.cell.innerHTML = html;
95: }
96: }
97: });
98:
然后我们实现子表及其分页
1: var detailView=new wijmo.collections.CollectionView();
2: var pageinfo='';
3: // update pager status
4: var updateCurrentPageDetail=function() {
5: debugger;
6: var curr = wijmo.format('页 {index:n0} / {cnt:n0}', {
7: index: detailView.pageIndex + 1,
8: cnt: detailView.pageCount
9: });
10: document.getElementById('dpspanCurrentOd').textContent = curr;
11: }
12:
13: // get products for a given category
14: var pageC=4;
15: function getDetail(deptId) {
16: debugger;
17: detailView=new wijmo.collections.CollectionView(null,{
18: pageSize: 3,
19: pageChanged:updateCurrentPageDetail
20: });
21: var url1 = "wijmo5/emp.json";
22: wijmo.httpRequest(url1, {
23: async:false,
24: data:{$filter:'deptId eq '+deptId},
25: success: function(xhr) {
26: debugger;
27: var response = JSON.parse(xhr.response);
28: var data = response.d ? response.d.results : response.data;
29:
30: detailView.sourceCollection = data;
31: pageinfo= wijmo.format('页 {index:n0} / {cnt:n0}', {
32: index: detailView.pageIndex + 1,
33: cnt: detailView.pageCount
34: });
35:
36: }
37: });
38: return detailView;
39: }
40: //detailView.onPageChanged();
41: /* detailView.deferUpdate(function () {
42: debugger;
43: updateCurrentPageDetail();
44: }); */
45:
46: // grid detail provider
47: //var detailGrid = new wijmo.grid.FlexGrid(null);
48: var dpGrid = new wijmo.grid.detail.FlexGridDetailProvider(mainGrid, {
49: // use animation when showing details
50: isAnimated: true,
51: // limit height of detail rows
52: maxHeight: 550,
53: // create detail cells for a given row
54: createDetailCell: function(row) {
55: var cell = document.createElement('div');
56: cell.style.height="250px";
57: cell.style.backgroundColor="white";
58: cell.style.color="black";
59: var gridcell=document.createElement('div');
60:
61: var pager=document.createElement('div');
62: pager.setAttribute("id","dppagerOd");
63: pager.style.backgroundColor="white";
64: pager.style.color="black";
65: pager.addEventListener('click', function(e) {
66: debugger;
67: var btn = wijmo.closest(e.target, 'button');
68: var id = btn ? btn.id : '';
69:
70: switch (id) {
71: case 'dpbtnFirstOd':
72: detailView.moveToFirstPage();
73: //updateCurrentPageDetail();
74: break;
75: case 'dpbtnPrevOd':
76: detailView.moveToPreviousPage();
77: //updateCurrentPageDetail();
78: break;
79: case 'dpbtnNextOd':
80: detailView.moveToNextPage();
81: //updateCurrentPageDetail();
82: break;
83: case 'dpbtnLastOd':
84: detailView.moveToLastPage();
85: //updateCurrentPageDetail();
86: break;
87: default:
88: updateCurrentPageDetail();
89: break;
90: }
91: });
92:
93:
94:
95: gridcell.style.height="85%";
96: cell.appendChild(gridcell);
97: cell.appendChild(pager);
98: var detailGrid = new wijmo.grid.FlexGrid(gridcell, {
99: autoGenerateColumns: false,
100: itemsSource: getDetail(row.dataItem.deptId),
101: isReadOnly: true,
102: columns: detailColumns,
103: formatItem: function(s, e) { // show row indices in row headers
104: if (e.panel.cellType == wijmo.grid.CellType.RowHeader) {
105: e.cell.textContent = e.row + 1;
106: }
107: }
108: });
109: detailGrid.columnFooters.rows.push(new wijmo.grid.GroupRow());
110: detailGrid.bottomLeftCells.setCellData(0, 0, '合计');
111: var dpbtnFirstOd=document.createElement('button');
112: dpbtnFirstOd.setAttribute("id","dpbtnFirstOd");
113: dpbtnFirstOd.setAttribute("class","btn");
114: var dpbtnFirstOdspan=document.createElement('span');
115: dpbtnFirstOdspan.setAttribute("class","wj-glyph-step-backward");
116: dpbtnFirstOd.appendChild(dpbtnFirstOdspan);
117: pager.appendChild(dpbtnFirstOd);
118:
119: var dpbtnPrevOd=document.createElement('button');
120: dpbtnPrevOd.setAttribute("id","dpbtnPrevOd");
121: dpbtnPrevOd.setAttribute("class","btn");
122: dpbtnPrevOd.style.marginLeft="3px";
123: var dpbtnPrevOdspan=document.createElement('span');
124: dpbtnPrevOdspan.setAttribute("class","wj-glyph-left");
125: dpbtnPrevOd.appendChild(dpbtnPrevOdspan);
126: pager.appendChild(dpbtnPrevOd);
127:
128: var spacespan=document.createElement('span');
129: spacespan.innerHTML=" ";
130: pager.appendChild(spacespan);
131:
132: var spanCurrentOd=document.createElement('span');
133: spanCurrentOd.setAttribute("id","dpspanCurrentOd");
134: debugger
135: spanCurrentOd.textContent=pageinfo;
136: pager.appendChild(spanCurrentOd);
137:
138:
139: var spacespan=document.createElement('span');
140: spacespan.innerHTML=" ";
141: pager.appendChild(spacespan);
142:
143: var dpbtnNextOd=document.createElement('button');
144: dpbtnNextOd.setAttribute("id","dpbtnNextOd");
145: dpbtnNextOd.setAttribute("class","btn");
146: var dpbtnNextOdspan=document.createElement('span');
147: dpbtnNextOdspan.setAttribute("class","wj-glyph-right");
148: dpbtnNextOd.appendChild(dpbtnNextOdspan);
149: pager.appendChild(dpbtnNextOd);
150:
151: var dpbtnLastOd=document.createElement('button');
152: dpbtnLastOd.setAttribute("id","dpbtnLastOd");
153: dpbtnLastOd.setAttribute("class","btn");
154: dpbtnLastOd.style.marginLeft="3px";
155: var dpbtnLastOdspan=document.createElement('span');
156: dpbtnLastOdspan.setAttribute("class","wj-glyph-step-forward");
157: dpbtnLastOd.appendChild(dpbtnLastOdspan);
158: pager.appendChild(dpbtnLastOd);
159: return cell;
160: }
161: });
162:
163:
164: mainGrid.columnFooters.rows.push(new wijmo.grid.GroupRow());
165: mainGrid.bottomLeftCells.setCellData(0, 0, '合计');
166:
注意:子表的分页功能需要通过增加元素来实现,
运行效果如下
代码如下:
更多信息请参照:
Wijmo产品网站:/developer/wijmojscore
Wijmo中文文档:/developer/wijmojscore
Wijmo中文学习教程:http://demo.grapecity.com.cn/wijmo5/learningwijmo/