【EasyUI】DataGrid 合并单元格

$('#tt').datagrid({onLoadSuccess:function(){var merges = [{index:2,rowspan:2},{index:5,rowspan:2},{index:7,rowspan:2}];for(var i=0; i<merges.length; i++)$('#tt').datagrid('mergeCells',{index:merges[i].index,field:'productid',rowspan:merges[i].rowspan});}});

使用实例（ajax后台排序后，传给前端，合并单元格，按照相同的某列属性值合并）：

当数据加载之后，我们合并数据网格（datagrid）中的一些单元格，所以放置下面的代码在 onLoadSuccess 回调函数中。

            $.ajax({url: url,type: "post",processData: false,contentType: false,success: function (spot_table_data) {spot_table_json = JSON.parse(spot_table_data);console.log(spot_table_json);console.log('spot_table_json length = ' + spot_table_json.length);$('#dg').datagrid({frozenColumns: [[{field: 'chn_name', title: '品种', align: 'center'}]],filterBtnIconCls: 'icon-filter',data: json_to_array(spot_table_json),striped: true, //隔行变色onLoadSuccess: function () {// 合并单元格var rows = $('#dg').datagrid("getRows");//获取行的数据for (var i = 0; i < rows.length; i++) {var rowspan = 0;for (var j = i; j < rows.length; j++) {{#console.log(rows[i]);#}if (rows[i].p_code == rows[j].p_code) {//计算合并多少行rowspan++;}}if (rowspan > 1) {//mergeCells合并单元格，index第几行开始，field合并的字段，rowspan合并行数，colspan合并列$('#dg').datagrid('mergeCells', {index: i,field: 'chn_name',rowspan: rowspan});i = i + rowspan - 1;console.log('rowspan=' + rowspan);}}}});},error: function (e) {alert("ajax排序失败");}})

合并效果示例（官方示例图）

【EasyUI】DataGrid 合并单元格 - 使用实例相关推荐

EasyUI DataGrid 合并单元格
EasyUI DataGrid 合并单元格 1 function mergeCells(){ 2 var arr =[{mergeFiled:"field",premiseFile ...
easyui 合并列_Easyui DataGrid 合并单元格
//调用 onLoadSuccess: compute, function compute() {//计算函数 autoMergeCells("Datagrid_Person_Managem ...
rowspan table布局_css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）...
在前端开发中,html 表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能:在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元 ...
springboot中使用poi-tl导出word（包含表格合并单元格）实例
一.背景在业务开发过程中,遇到有需要生成包含表格的word文档,且一部分表格需要动态生成,且需要根据数据来合并单元格,最后呈现的方式如下图: 一开始想到的解决方案是通过freemarker来生成,但 ...
Easyui DataGrid 改变单元格样式
根据需求,需要对DataGrid单元格进行高亮显示方法一: $('#dg').datagrid('gotoPage', {url: '',onLoadSuccess: function (){var ...
easyui 报表合并单元格
前段时间工作中碰到有需求,要求数据按下图所示格式来显示,当时在园子里看到了一篇文章(时间久了,想不起是哪一篇),研究了后做出了如下的DEMO,在此当作学习笔记,简单记录一下. 首先是效果图,如下: 数 ...
bootstraptable合并标题_bootstrapTable 合并单元格
/** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @param fieldName 合并属性名称 * @param colspan 合并列 * @param tar ...
Easyui数据表格合并单元格
合并与不合并的数据在同一个表中: $('#table_id').datagrid({title: '标题',collapsible: true,singleSelect:true,nowrap: tr ...
EasyUI DataGrid根据字段动态合并单元格
为什么80%的码农都做不了架构师?>>> 1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * ...

【EasyUI】DataGrid 合并单元格 - 使用实例

官方文档 - EasyUI 合并单元格

使用实例（ajax后台排序后，传给前端，合并单元格，按照相同的某列属性值合并）：

合并效果示例（官方示例图）

【EasyUI】DataGrid 合并单元格 - 使用实例相关推荐

最新文章

热门文章