JqueryEasyUI之DataGrid扩展

本文主要是介绍JqueryEasyUI之DataGrid扩展，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

DataGrid通用合并扩展方法：

$.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;}}}});});});}
});

调用方法：

//加载成功后调用此方法
function onLoadSuccess(data) {$(this).datagrid("autoMergeCells", ['No', 'NativePlace','填写字段名称']);}

HTML代码:

<table class="easyui-datagrid" title="Merge Cells for DataGrid" style="width:700px;height:450px"data-options="rownumbers: true,singleSelect: true,iconCls: 'icon-save',url: '/Home/GetEmployee',method: 'get',rownumbers:true,pagination:true,onLoadSuccess:onLoadSuccess"><thead><tr><th data-options="field:'EmployeeID',width:300">员工编号</th><th data-options="field:'No',width:100">登录名</th><th data-options="field:'RealName',width:100,align:'right'">真实名字</th><th data-options="field:'NativePlace',width:80,align:'right'">地区</th><th data-options="field:'status',width:60,align:'center'">操作</th></tr></thead>
</table>

效果图：