沫沫金:jQuery EasyUI DataGrid动态合并单元格解决方案

简介:  jQuery EasyUI DataGrid根据字段动态合并单元格,使用自定义函数mergeCellsByField()在DataGrid的onLoadSuccess中调用。 自定义函数mergeCellsByField:   /**  * EasyUI DataGrid...

 jQuery EasyUI DataGrid根据字段动态合并单元格,使用自定义函数mergeCellsByField()在DataGrid的onLoadSuccess中调用。

自定义函数mergeCellsByField:

 

 
 
  1. /** 
  2.  * EasyUI DataGrid根据字段动态合并单元格 
  3.  * @param tableID 要合并table的id 
  4.  * @param colList 要合并的列,用逗号分隔(例如:"name,department,office"); 
  5.  */ 
  6.    function mergeCellsByField(tableID,colList){ 
  7.        var ColArray = colList.split(","); 
  8.        var tTable = $('#'+tableID); 
  9.        var TableRowCnts=tTable.datagrid("getRows").length; 
  10.        var tmpA; 
  11.        var tmpB; 
  12.        var PerTxt = ""
  13.        var CurTxt = ""
  14.        var alertStr = ""
  15.        for (j=ColArray.length-1;j>=0 ;j-- ) 
  16.        { 
  17.            PerTxt=""
  18.            tmpA=1; 
  19.            tmpB=0; 
  20.             
  21.            for (i=0;i<=TableRowCnts ;i++ ) 
  22.            { 
  23.                if (i==TableRowCnts) 
  24.                { 
  25.                    CurTxt=""
  26.                } 
  27.                else 
  28.                { 
  29.                    CurTxt=tTable.datagrid("getRows")[i][ColArray[j]]; 
  30.                } 
  31.                if (PerTxt==CurTxt) 
  32.                { 
  33.                    tmpA+=1; 
  34.                } 
  35.                else 
  36.                { 
  37.                    tmpB+=tmpA; 
  38.                    tTable.datagrid('mergeCells',{ 
  39.                        index:i-tmpA, 
  40.                        field:ColArray[j], 
  41.                        rowspan:tmpA, 
  42.                        colspan:null 
  43.                    }); 
  44.                    tmpA=1; 
  45.                } 
  46.                PerTxt=CurTxt; 
  47.            } 
  48.        } 
  49.    } 

函数mergeCellsByField调用:

 

 
 
  1. function workerCount(){ 
  2.     $('#coutTable').datagrid({ 
  3.         title:'员工统计', 
  4.         height:595, 
  5.         nowrap: false, 
  6.         striped: true, 
  7.         fitColumns:true, 
  8.         url:'<%=path%>/order.do?method=orderCount',   
  9.         queryParams:{date:$('#date').datebox('getValue')}, 
  10.         onLoadSuccess:function(data){ 
  11.             if (data.rows.length>0) 
  12.             { 
  13.                 //调用mergeCellsByField()合并单元格 
  14.                 mergeCellsByField("coutTable","department,position"); 
  15.             } 
  16.         }, 
  17.         columns:[[ 
  18.             {title:'编号',field:'number',width:120}, 
  19.             {title:'姓名',field:'name',width:120}, 
  20.             {title:'部门',field:'department',width:120}, 
  21.             {title:'职位',field:'position',width:120} 
  22.         ]], 
  23.         rownumbers:true 
  24.     }); 
目录
相关文章
|
6月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
39 2
|
6月前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
68 0
|
5月前
|
JavaScript
jQuery及highcharts做cpu动态走势图
jQuery及highcharts做cpu动态走势图
49 1
|
6月前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
6月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
6月前
|
JavaScript 前端开发
jquery实现动态五角星评分
jquery实现动态五角星评分
|
6月前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
160 0
|
6月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
|
JavaScript
jQuery动态拼接多张图片并且获取每张图片名称
jQuery动态拼接多张图片并且获取每张图片名称
56 1
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text

相关课程

更多