EasyUI-datagrid-自动合并单元格
2024-10-12 14:31:40
1.目标
1.1表格初始化完成后，已经自动合并好需要合并的行；
1.2当点击字段排序后，重新进行合并；
2.实现
2.1 引入插件
- /**
- * author ____′↘夏悸
- * create date 2012-11-5
- *
- **/
- $.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;
- }
- }
- }
- });
- });
- });
- }
- });
2.2html代码
- <table id="simpleDgId" style="height: 300px" />
2.3js代码
- var sortFlag = false;
- $('#simpleDgId').datagrid({
- url:"testController.do?datagrid",
- fitColumns:true,
- singleSelect:true,
- remoteSort: false,
- columns:[[
- {field:"age",title:"年龄",width:25,align:'center',sortable:true},
- {field:"userName",title:"名称",width:25,align:'center',sortable:true},
- {field:"mobilePhone",title:"手机",width:25,align:'center',sortable:true}
- ]],
- onSortColumn:function(sort, order){
- sortFlag = true;
- if("userName"==sort){
- $(this).datagrid("autoMergeCells",[sort]);
- }else{
- $(this).datagrid("autoMergeCells");
- }
- },
- onLoadSuccess: function(data){
- if(!sortFlag) $(this).datagrid("autoMergeCells");
- }
- });
2.4后台
url:"testController.do?datagrid"
后台数据就是普通的表格数据，这里就不赘述了
2.5效果
最新文章
- Gruntjs: grunt-contrib-jst
- 数据挖掘：Weka代码学习
- C#快速排序详解
- Mysql:表的操作
- 我也来玩玩WinForm~BeginInvoke让用户体验更好！
- C# 在本地创建文件夹及子文件夹
- 单双引号的区别，defined容易疏忽的小地方
- Python笔记·第五章—— 列表（List） 的增删改查及其他方法
- 面向矩阵的numpy入门笔记
- 原码,反码,补码 与（&） 或（|） 非(~) 异或(^) 左移 << 右移 >> 无符号右移 >>>
- Vue-路由配置和使用步骤整理
- 给我一台全新的服务器，使用nginx+gunicorn+supervisor部署django
- 03-自己封装DateUtil工具类
- Rancher 容器管理平台-实战训练营-免费视频培训
- 【android】模拟点击某个指定坐标作用在View上
- Sql Server 关于SET IDENTITY_INSERT的问题
- Eclipse svn 忽略文件夹/ svn 设置不同步
- SGU 202. The Towers of Hanoi Revisited
- Supper关键字
- UICollectionView Layout自定义 Layout布局