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>

效果图:

JqueryEasyUI之DataGrid扩展的更多相关文章

  1. jquery-easyui中datagrid扩展,隐藏显示表头功能

    今天,后台中需要新增一个功能,用户可以自由选择显示的列,之后保存到本地localStroage中.所以扩展了easyui中datagrid的onHeaderContextMenu方法. 使用方法: _ ...

  2. Datagrid扩展方法InitEditGrid{支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  3. Datagrid扩展方法onClickCell{easyui-datagrid-扩充-支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  4. Easyui datagrid 扩展单元格textarea editor

    datagrid 扩展单元格textarea editor by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 如下,在没有扩展的情况下,初始化如下 手 ...

  5. jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法

    jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法 工作中用到一个具有多选功能的easyui-datagrid在处理cell的点击事件时,不同 ...

  6. jQueryEasyUI应用 – datagrid之CRUD应用

    本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用 一.前言准备 1.我们将使用下面的插件: datagrid:向用户展示列表数据. dia ...

  7. DataGrid 扩展

    //扩展表格,支持上传附件 function extendDataGrid(){ //扩展表格方法,合并单元格 ,参数为数组 $.extend($.fn.datagrid.methods, { aut ...

  8. 【转】jquery-easyui中datagrid的单击删除此行

    最近在easyui的项目开发,easyui封装了许多方法,用起来很方便,但同时也遇到了不少的问题. 如果在datagrid中直接将index传给easyui自带的deletRow方法来删除当前点击行, ...

  9. datagrid 扩展 页脚 合计功能

    效果图:合计信息展示在页脚中(showFooter:true) code: <!DOCTYPE html> <html> <head> <meta chars ...

随机推荐

  1. Android 热修复方案Tinker

    转自:http://blog.csdn.net/l2show/article/details/53925543 Android 热修复方案Tinker(一) Application改造 Android ...

  2. HP 820 G2变色龙安装10.11.6基本完美

    初始状态: 一块ssd硬盘,MBR格式分区,安装了WIN7 64位. 不想动win系统,因此就安装在硬盘的扩展分区 电脑配置: cpu: i7-5600u 声卡: ALC280 显卡: HD55 ...

  3. 博文Contents<1--到200—>

    ====================-------------- 前言:博客中的随笔文章.并非都是笔者的原创文章.有些是听别人说的.有些是书上摘录的.有些是百度的.有些是别人博客的文章.有些是自己 ...

  4. Linux 安装与配置 mysql 环境

    Centos系统,可以提前将这些工具包安装上: # yum -y install gcc libxml2-dev curl screen \libpng12-dev autoconf libpcre3 ...

  5. word转化jpg

    用画图复制粘贴word内容,然后保存为jpg  即可~亲测可行,比截图清洗太多.

  6. ecshop随机分类

    $get_categories_tree = get_categories_tree(); $smarty->assign('category_1', RandArray($get_catego ...

  7. CDCE913产生任意频率

    1,上TI官网下载CDCE913的datasheet和配置软件clock Pro.如果只需要配置CDCE913成某一个固定频率,那么用clock Pro可以很方便快捷. TI的初衷应该就是通过I2C配 ...

  8. 【10-25】intelliji ide 学习笔记

    快捷键 /** alter+enter 导包,异常处理等提示 psvm 快速main函数 sout 快速sysout语句 fi 快速for循环 ctrl+d 重复一行 Ctrl+X 删除行 Ctrl+ ...

  9. mybase 用户教程

    一.安装.卸载 1.安装 在Mac OS X环境下,可通过打开下载的.dmg文件,再把myBase图标拖到应用程序文件夹即可安装.然后通过双击程序图标运行程序 2.卸载 对于Mac OS X,把myB ...

  10. Redis实战阅读笔记——第一章

    Redis 实战 中文版 的20-21页看的人郁闷死了,最后看英文版才明白意思,哎,我理解能力差成这样了 其中,图 1-12 有错误,草,这个是英文版的错--应该是group:programming