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效果

转载于:https://www.cnblogs.com/yzycoder/p/4872185.html

EasyUI-datagrid-自动合并单元格(转)相关推荐

  1. Easyui数据表格合并单元格

    合并与不合并的数据在同一个表中: $('#table_id').datagrid({title: '标题',collapsible: true,singleSelect:true,nowrap: tr ...

  2. java poi生成word 插入表格,图片,自动合并单元格,并且可以在已存在的word上追加

    poi版本选3.10以上的 要不然插入图片 word会打不开 <dependency><groupId>org.apache.poi</groupId><ar ...

  3. 记录【vxe-table】自动合并单元格

    <vxe-table@cell-click="handleClickCell":span-method="spanMethods" //自动合并单元格:d ...

  4. 在DataGrid中合并单元格行

    最近在做项目的时候经常遇到要合并单元格的情况,发现这个东西.net中并没有现成的方法,研究了一下,总结了两种方法. 这个主要都是行合并的,有以下两种情况 1.多行合并为一行,其中将某个或某几个单元格的 ...

  5. poi导出excel,行相同数据自动合并单元格

    /***excel行自动合并*listData 待导出数据*/ public void test(SXSSFSheet sheet,List<FanManagerExt> listData ...

  6. easyExcel自动合并单元格

    来源EasyExcel(根据条件动态合并单元格的重复数据) package com.ustcinfo.fn.comp.complain.util;import com.alibaba.excel.me ...

  7. java单元格合并多列_ElementUI表格列相同值自动合并单元格( 多列 )

    上篇文章写了如何在处理单列相同数据时让相同的项进行自动合并, 如果有多列合并的需求我们也应该可以从容应对... (产品: 你们看我干嘛?) 废话不多说 上代码 HTML JS var Main = { ...

  8. easyui使用mergeCells合并单元格后第一行行高过大

    背景:近期在用easyui做表格,要求前面几行是合并对应后面多行的,使用mergeCells合并后,第一行老是过大,联想到应该是自适应问题,遂找API: 解决:将autoRowHeight属性设置为f ...

  9. vue + elementui table 列内容相同 自动合并单元格 完整代码

    效果图 <el-table :data="gridData" border class="det-div" :span-method="obje ...

  10. elementui table 第一列内容相同 自动合并单元格 el-table第一列内容相同自动合并

    template( :span-method="objectSpanMethod") <!-- 表格 --><el-table:data="tableD ...

最新文章

  1. BlogEngine.Net架构与源代码分析系列(转载)
  2. numpy基本用法多维数组
  3. sqlserver ADO.net 查询数据库加锁,事务提交
  4. Weka的-3.6.10的C4.5与Quinlan教授的C4.5算法的区别
  5. Python使用tkinter编写图片浏览程序
  6. TCP发送接收数据2
  7. 使用qmake 单独生成Qt程序
  8. nginx 错误Failed to start The nginx HTTP and reverse proxy server.
  9. photoshop cc2019快捷键
  10. PhotoshopCC2019改变证件照的底色---超实用的两种方法
  11. 计算机为何会自动开机,电脑自动开机是怎么回事 电脑自动开机解决方法
  12. cadence、PADS、protel教程(PCB Layout图文教程终结版)
  13. 转DICOM学习笔记
  14. pdo连接mysql_php PDO连接mysql
  15. 昨天去某大厂面试,居然让我做四则运算,还好我够机灵。
  16. 计算机基础——计算机基础知识
  17. Python之字符编码与文件操作
  18. 鸿蒙系统的软件怎么下载,怎么下载鸿蒙系统?
  19. 计算机网络(七):网络安全
  20. Programming Contest Ranking(题解)

热门文章

  1. 【问链财经-区块链基础知识系列】 第二十二课 贸易金融区块链平台的技术机理与现实意义
  2. android代码 根据黑名单拦截短信,滴滴将小范围测试短信报警 司、乘两端同步试运行“黑名单”...
  3. struts启动过滤器异常_面试必备:网关异常了怎么办?如何做全局异常处理?
  4. mysql数据库用hs_MySQL数据库安装步骤
  5. 计算机应用与网络讲义,计算机基础讲义
  6. java同名类_java两个不同名类 在里面建立两个同名的类 怎么破
  7. python爬取换页_一个可识别翻页的简易Python爬虫程序
  8. java 树 右键菜单_VUE实现Studio管理后台(八):用右键菜单contextmenu,编辑树形结构...
  9. 涂格子游戏html,网页版方格贪吃蛇游戏html源码分享
  10. pytorch argmax_一起无聊地用PyTorch刷爆sklearn的内置数据集吧(`?ω?′)