EasyUI-DataGrid多行动态选择性合并算法实现

最新推荐文章于 2021-04-24 08:25:21 发布
原创 最新推荐文章于 2021-04-24 08:25:21 发布 · 置顶 · 1.8w 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#DataGrid合并行 #DataGrid数据合并 #EasyUI列表合并 #jQuery列表合并 #DataGrid行合并问题

本文介绍如何在jQuery EasyUI的DataGrid中实现多行动态选择性合并，通过自定义方法mergeCells在数据加载成功后进行合并。文章讨论了如何设置约束条件避免错误的合并，并提供了一种解决日期字段合并问题的方法。同时，对于包含checkbox的情况，提出了相应的合并解决方案。

 jQuery EasyUI中有一个很好用的数据列表控件，即DataGrid控件，后台以一定的json格式传给控件就能在前台展示出来，功能很强大，不过有时需求需要这样即多行合并，如在列表中如果相同的部门字段上下合并达到Excel展示相同的效果，而且有时不止这一个字段的合并，还有其他字段根据内容相同或者其他字段的ID相同啊进行合并。
       官网上没有对应的类似的Demo，可能开发中遇到这种情况一般我们都自己动态拼接成一个table。其实，利用官网提供的DataGrid的方法是可以实现datagrid在展现时表格行动合并，不过查询的数据要把合并的数据行“安排”在一起。
       首先我们<table>增加一个属性data-options="onLoadSuccess:mergeCells",mergeCells是我们对应的JS方法名，意思就是datagrid加载数据成功之后，执行这个mergeCells方法，mergeCells定义如下：

//datagrid加载完后合并指定单元格
function mergeCells(data){
	var arr =[{mergeFiled:"SERIALNUM",premiseFiled:"PROJECTID"},	//合并列的field数组及对应前提条件filed（为空则直接内容合并）
	          {mergeFiled:"PROJECTNAME",premiseFiled:"PROJECTID"
最低0.47元/天 解锁文章
解决EasyUIdataGrid列比较多，无数据，列展现不全
01-07
解决EasyUIdataGrid列比较多，无数据，列展现不全
easyui datagrid 删除多行操作
12-19
easyui datagrid 删除多行操作时会出现异常，该方法可以直接加载一次数据，避免该问题的发生
DataGrid 实现复杂表头和合并行源码与示例
09-21
一、不需要编写任何样式、只需通过代码添加将 ColumnItem 集合添加到DataGrid列集合,需要引用空间 using System.Windows.Controls ，才能添加扩展函数。 二、支持实现复杂的表头、不限分级层次； 三、复杂表头支持位置拖动、 列宽度拖动，组内列会按比例自动调整； 四、支持模拟行合并，即对象中存在集合成员； 五、支持自定义转换器（IValueConverter）； 六、支持对象集合(ICollection)和支持动态字典集合(ICollection<IDictionary>)的绑定 ； 七、对象集合使用 AddBindingPathTemplateColumn 函数，字典集合使用 AddBindingParameterTemplateColumn 函数 八、详见示例。
Datagrid-filter插件
03-27
`Datagrid-filter`插件正是针对这种需求设计的，它是一个高效且实用的Grid插件，旨在提升数据网格的可操作性和用户交互性。这个插件的核心功能是为每一列提供过滤条件，使得用户能够快速筛选出所需的信息，极大地...
JQuery EasyUI DataGrid性能调优攻略：关键步骤快速提升响应速度
本文探讨了JQuery EasyUI DataGrid组件在实际应用中的性能问题，并提出了一系列诊断、分析与优化的策略。通过分析DataGrid的性能瓶颈，比如渲染时间、DOM操作和JavaScript执行效率，本文教导读者如何
基于easyUI和jsp的电子仓库管理系统开发与实现
综上所述，"easyUI+jsp电子仓库管理系统"不仅需要实现基本的电子文档管理功能，还应当关注系统的安全性、用户体验和可维护性。通过对需求的深入分析，合理使用easyUI组件，并结合良好的系统设计，能够构建出一个强大...
JavaScript实现多表头Excel导出功能
为此，该导出功能必须能够解析 DataGrid 的列配置（columns 配置项），识别跨列合并关系，并在生成的 Excel 文件中正确渲染出多行表头效果。这通常涉及到对 HTML 表格结构或原始列定义数组的递归遍历与坐标映射算法...
EasyUI DataGrid根据字段动态合并单元格(行合并)
起个破名真费劲..的博客
11-26 1257
将相同内容的单元格合并,代码如下 /** *参数 tableID 要合并table的id *参数 colList 要合并的列,用逗号分隔(例如："name,department,office"); */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); ...
easyui的datagrid生成合并行,合计计算价格
08-08
easyui的datagrid生成合并行,合计计算价格!
DataGrid表头合并和单元格内容合并-升级版
03-21
DataGrid表头合并和单元格内容合并-升级版
easyui动态合并行
u013495872的专栏
04-01 780
//数据显示datagrid加载标题等信息                                                                              $('#zsyhtjList').datagrid({
datagrid 动态合并行
maphey的专栏
11-09 375
easyui datagrid 需要动态合并行，可以考虑在加载完数据之后按照文本合并 $('#datagrid').datagrid({ method:"post", loadMsg:'数据加载中请稍后……', pagination:false, rownumbers:false, resizable:...
JQuery EasyUI DataGrid动态合并单元格
Alyces的专栏
12-11 837
HTML代码：       JavaScript 代码：      /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如："name,department,office"); */ function Mer
easyui一行显示多行_EasyUI DataGrid 实现单行/多行编辑功能
weixin_33369808的博客
02-06 1386
// 初始化数据列表function initDatagrid() {$('#dg').datagrid({loadMsg: '数据加载中请稍后……',striped: true,url: '/api/Attendance',sortName: 'ID',sortOrder: 'desc',method: "get",striped: true,border: true,selectOnCheck...
easyUI合并值一样的列
heyanfeng22的专栏
11-04 1704
//easyUI合并单元格 function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable = $("#" + tableID); var TableRowCnts = tTable.datagrid("getRows").length
easyui-datagrid根据数据的分组进行自动合并行
ACBEGF的博客
04-24 969
function loadingthisData(data){ if(data.rows != null){//data.rows是数据数组 var merges =[{}] data.rows.forEach(function(object,index,array){//object数据对象,index数组下标,array当前循环的数组 var indexData = {}; var count=0; array.forEach(function(object2,index2,
EasyUI：EasyUI-DataGrid多行合并实现
weixin_30706507的博客
03-19 325
1、首先我们<table>增加一个属性data-options="onLoadSuccess:mergeCells",mergeCells是我们对应的JS方法名，意思就是datagrid加载数据成功之后，执行这个mergeCells方法，mergeCells定义如下： //datagrid加载完后合并指定单元格 function mergeCells(data){ ...
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值