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>
效果图:
JqueryEasyUI之DataGrid扩展的更多相关文章
- jquery-easyui中datagrid扩展,隐藏显示表头功能
今天,后台中需要新增一个功能,用户可以自由选择显示的列,之后保存到本地localStroage中.所以扩展了easyui中datagrid的onHeaderContextMenu方法. 使用方法: _ ...
- Datagrid扩展方法InitEditGrid{支持单元格编辑}
//-----------------------------------------------------------------/******************************** ...
- Datagrid扩展方法onClickCell{easyui-datagrid-扩充-支持单元格编辑}
//-----------------------------------------------------------------/******************************** ...
- Easyui datagrid 扩展单元格textarea editor
datagrid 扩展单元格textarea editor by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 如下,在没有扩展的情况下,初始化如下 手 ...
- jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法
jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法 工作中用到一个具有多选功能的easyui-datagrid在处理cell的点击事件时,不同 ...
- jQueryEasyUI应用 – datagrid之CRUD应用
本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用 一.前言准备 1.我们将使用下面的插件: datagrid:向用户展示列表数据. dia ...
- DataGrid 扩展
//扩展表格,支持上传附件 function extendDataGrid(){ //扩展表格方法,合并单元格 ,参数为数组 $.extend($.fn.datagrid.methods, { aut ...
- 【转】jquery-easyui中datagrid的单击删除此行
最近在easyui的项目开发,easyui封装了许多方法,用起来很方便,但同时也遇到了不少的问题. 如果在datagrid中直接将index传给easyui自带的deletRow方法来删除当前点击行, ...
- datagrid 扩展 页脚 合计功能
效果图:合计信息展示在页脚中(showFooter:true) code: <!DOCTYPE html> <html> <head> <meta chars ...
随机推荐
- .net 开源组件
文章转自:http://www.cnblogs.com/asxinyu/p/dotnet_opensource_project_3.html 在前2篇文章这些.NET开源项目你知道吗?让.NET开 ...
- latex均方极限符号l.i.m在lyx下的输入方法
$\mathop{l.i.m}\limits_{x\to +\infty}$ 命令说明: 1.指定数学环境$$ 2.\mathop{l.i.m}指数学符号自定义为l.i.m 3.\limits_{x\ ...
- 分页型Memory LCD显存管理与emWin移植
上一篇随笔整理了一下逐行扫描型Memory LCD的显存管理与emWin移植,这篇就整理一下分页型Memory LCD显存管理与emWin移植. //此处以SSD1306作为实例 //OLED的显存/ ...
- 前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode
近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...
- 【学习笔记】JAva编程思想之多态
1.如果java的基类拥有某个已被多次重载的方法名称,那么在导出类中重新定义该方法名称并不会屏蔽在基类的任何版本.因此,无论是在该层或者他的基类中对方法进行定义,重载机制都可以正常工作. 2.使用@O ...
- Ajax详解
一:什么是Ajax AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法 ...
- SQLServer日期函数用法
--1.显示本月第一天 ,) ),)) --2.显示本月最后一天 ,),,))) ,,,)) --3.上个月的最后一天 ,,)) --4.本月的第一个星期一 , ) --5.本年的第一天 ,) --6 ...
- linux 命令 之判断表达式
摘自http://www.comptechdoc.org/os/linux/usersguide/linux_ugshellpro.html Tests There is a function pro ...
- 【bzoj1231】[Usaco2008 Nov]mixup2 混乱的奶牛
题目描述 混乱的奶牛[Don Piele, 2007]Farmer John的N(4 <= N <= 16)头奶牛中的每一头都有一个唯一的编号S_i (1 <= S_i <= ...
- Gogland 个性化设置
1.去掉 hints 提示功能: Preferences -> Editor -> General -> Appearance -> 去掉勾选 “Show parameter ...