Easyui-DataGrid纵向合并单元格(根据某列合并)
2017-12-15 13:36
2616 查看
使用Easyui-DataGrid过程用。做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法。
解决方案:
代码一
代码二
在jQuery("#mygrid").datagrid的onLoadSuccess中调用mergeCellsByField
添加mergeCellsByField方法
注:如果不需要按照某个字段合并,由系统自动合并请移除代码二中buyprocode、newbuyprocode相关代码即可
解决方案:
代码一
onLoadSuccess: function (data) { //data是默认的表格加载数据,包括rows和Total if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 mergeCellsByField("mygrid", "opt,buyprojectCode,buyprojectName,projectIndustryType,tenderName,agencyName,informationServiceFee,informationServiceState,fieldFee,fieldState"); } }
代码二
/** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 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 buyprocode = ""; var newbuyprocode = ""; var alertStr = ""; for (j = ColArray.length - 1; j >= 0; j--) { PerTxt = ""; buyprocode = ""; tmpA = 1; tmpB = 0; for (i = 0; i <= TableRowCnts; i++) { if (i == TableRowCnts) { CurTxt = ""; newbuyprocode = ""; } else { CurTxt = tTable.datagrid("getRows")[i][ColArray[j]]; newbuyprocode = tTable.datagrid("getRows")[i]["buyprojectCode"]; } if (PerTxt == CurTxt && buyprocode == newbuyprocode) { tmpA += 1; } else { tmpB += tmpA; tTable.datagrid("mergeCells", { index: i - tmpA, field: ColArray[j], //合并字段 rowspan: tmpA, colspan: null }); 9a23 tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并 index: i - tmpA, field: "Ideparture", rowspan: tmpA, colspan: null }); tmpA = 1; } PerTxt = CurTxt; buyprocode = newbuyprocode; } } }
在jQuery("#mygrid").datagrid的onLoadSuccess中调用mergeCellsByField
添加mergeCellsByField方法
注:如果不需要按照某个字段合并,由系统自动合并请移除代码二中buyprocode、newbuyprocode相关代码即可
相关文章推荐
- EasyUI-datagrid-自动合并单元格
- EasyUI表格datagrid合并行单元格
- easyUI合并DataGrid单元格
- easyUI合并DataGrid单元格
- Report Service 2008 实现:根据分组,纵向合并单元格
- EasyUI-datagrid-自动合并单元格
- Easyui Datagrid 根据字段动态合并行
- 扩展-Easyui Datagrid相同连续列合并扩展(一)
- easyui_datagrid合并行单击某行选中所有
- Easyui datagrid datagrid-view1纵向滚动条去除解决方法
- EasyUI DataGrid编辑单元格时使用combogrid
- 纵向合并gridview单元格的两种方法
- EasyUI datagrid 列包含超链接以及鼠标经过提示单元格内容
- Easyui之datagrid实现点击单元格修改单元格背景颜色
- [WPF]DataGrid行前景色根据单元格编辑值变色
- easyUi datagrid鼠标经过提示单元格内容
- 为EasyUI的dataGrid单元格增加鼠标移入移出事件
- easyui datagrid 单元格数据超出后自动换行
- EasyUI datagrid : 启用行号、固定列及多级表头后,头部行号位置单元格错位的问题
- Easyui Datagrid相同连续列合并扩展(二)