Wijmo5实现主细表(一)

发布时间:2017/12/18 00:12 发布者:jeffryli

返回博客中心

概述

有时,行绑定到数据对象,其中包含的信息比普通表格上容易的容易更多.

在这些情况下,您可能需要使用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="&nbsp;&nbsp;&nbsp;";
 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="&nbsp;&nbsp;&nbsp;";
 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:          

 

注意:子表的分页功能需要通过增加元素来实现,

运行效果如下

1

代码如下:

更多信息请参照:

Wijmo产品网站:/developer/wijmojscore

Wijmo中文文档:/developer/wijmojscore

Wijmo中文学习教程:http://demo.grapecity.com.cn/wijmo5/learningwijmo/


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网