jQuery EasyUI DataGrid根据字段动态合并单元格,使用自定义函数mergeCellsByField()在DataGrid的onLoadSuccess中调用。
自定义函数mergeCellsByField:
- /**
- * EasyUI DataGrid根据字段动态合并单元格
- * @param tableID 要合并table的id
- * @param colList 要合并的列,用逗号分隔(例如:"name,department,office");
- */
- function mergeCellsByField(tableID,colList){
- var ColArray = colList.split(",");
- var tTable = $('#'+tableID);
- var TableRowCnts=tTable.datagrid("getRows").length;
- var tmpA;
- var tmpB;
- var PerTxt = "";
- var CurTxt = "";
- var alertStr = "";
- for (j=ColArray.length-1;j>=0 ;j-- )
- {
- PerTxt="";
- tmpA=1;
- tmpB=0;
- for (i=0;i<=TableRowCnts ;i++ )
- {
- if (i==TableRowCnts)
- {
- CurTxt="";
- }
- else
- {
- CurTxt=tTable.datagrid("getRows")[i][ColArray[j]];
- }
- if (PerTxt==CurTxt)
- {
- tmpA+=1;
- }
- else
- {
- tmpB+=tmpA;
- tTable.datagrid('mergeCells',{
- index:i-tmpA,
- field:ColArray[j],
- rowspan:tmpA,
- colspan:null
- });
- tmpA=1;
- }
- PerTxt=CurTxt;
- }
- }
- }
函数mergeCellsByField调用:
- function workerCount(){
- $('#coutTable').datagrid({
- title:'员工统计',
- height:595,
- nowrap: false,
- striped: true,
- fitColumns:true,
- url:'<%=path%>/order.do?method=orderCount',
- queryParams:{date:$('#date').datebox('getValue')},
- onLoadSuccess:function(data){
- if (data.rows.length>0)
- {
- //调用mergeCellsByField()合并单元格
- mergeCellsByField("coutTable","department,position");
- }
- },
- columns:[[
- {title:'编号',field:'number',width:120},
- {title:'姓名',field:'name',width:120},
- {title:'部门',field:'department',width:120},
- {title:'职位',field:'position',width:120}
- ]],
- rownumbers:true
- });
- }
本文转自 沫沫金 51CTO博客,原文链接:http://blog.51cto.com/zl0828/1175379,如需转载请自行联系原作者