1、html部分:
<div id="table1"></div>
2、js部分:
$(‘#table1‘).datagrid({ data : data, loadFilter: pagerFilter, height: $(document).height()*0.87, striped: true, selectOnCheck: true, pagination: true, pageSize:10, pageList:[10,20,30,40,50], onLoadSuccess: function (data) { if (data.rows.length > 0) { $(‘#table1‘).datagrid("autoMergeCells", [‘userid‘]); } }, columns: [ [{ field: ‘userid‘, title: ‘列名‘, width: ‘15%‘, align: ‘center‘ },{ field: ‘username‘, title: ‘列名‘, width: ‘15%‘, align: ‘center‘ }] });
autoMergeCells方法扩展了datagrid的方法,实现如下:
/** * EasyUI DataGrid根据字段动态合并单元格 * 参数 jq 要合并table的id * 参数 fields 要合并的列,用逗号分隔(例如:"field1,field2,field3,..."); */ $.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () { var target = $(this); if (!fields) { fields = target.datagrid("getColumnFields"); } var rows = target.datagrid("getRows"); var i = 0, j = 0, temp = {}; for (i; i < rows.length; i++) { var row = rows[i]; j = 0; for (j; j < fields.length; j++) { var field = fields[j]; var tf = temp[field]; if (!tf) { tf = temp[field] = {}; tf[row[field]] = [i]; } else { var tfv = tf[row[field]]; if (tfv) { tfv.push(i); } else { tfv = tf[row[field]] = [i]; } } } } $.each(temp, function (field, colunm) { $.each(colunm, function () { var group = this; if (group.length > 1) { var before, after, megerIndex = group[0]; for (var i = 0; i < group.length; i++) { before = group[i]; after = group[i + 1]; if (after && (after - before) == 1) { continue; } var rowspan = before - megerIndex + 1; if (rowspan > 1) { target.datagrid(‘mergeCells‘, { index: megerIndex, field: field, rowspan: rowspan }); } if (after && (after - before) != 1) { megerIndex = after; } } } }); }); }); } });
时间: 2024-10-05 23:50:33