easyUI单元格合并自定义封装
1、指定列的行合并
* 效果图:
* 程序:
- function mergeGridColCells(grid,rowFildName)
- {
- var rows=grid.datagrid('getRows' );
- //alert(rows.length);
- //alert(rows[1][rowFildName]);
- var startIndex=0;
- var endIndex=0;
- if(rows.length< 1)
- {
- return;
- }
- $.each(rows, function(i,row){
- if(row[rowFildName]==rows[startIndex][rowFildName])
- {
- endIndex=i;
- }
- else
- {
- grid.datagrid( 'mergeCells',{
- index: startIndex,
- field: rowFildName,
- rowspan: endIndex -startIndex+1
- });
- startIndex=i;
- endIndex=i;
- }
- });
- grid.datagrid( 'mergeCells',{
- index: startIndex,
- field: rowFildName,
- rowspan: endIndex -startIndex+1
- });
- }
*参数说明grid: easyUI的datagrid对象rowFildName: 和并列的field属性值
- 源代码如下:
- function mergeGridColCells(grid,refCols,rowFildNames)
- {
- var rows=grid.datagrid('getRows' );
- //alert(rows.length);
- //alert(rows[1][rowFildName]);
- var flag=false ;
- var startIndex=0;
- var endIndex=0;
- if(rows.length< 1)
- {
- return;
- }
- $.each(rows, function(i,row){
- $.each(refCols, function(j,refCol){
- if(row[refCol]!=rows[startIndex][refCol])
- {
- flag= false;
- return false ;
- }
- else
- {
- flag= true;
- }
- });
- //if(row[rowFildName]==rows[startIndex][rowFildName])
- if(flag)
- {
- endIndex=i;
- }
- else
- {
- $.each(rowFildNames, function(k,rowFildName){
- grid.datagrid( 'mergeCells',{
- index: startIndex,
- field: rowFildName,
- rowspan: endIndex -startIndex+1,
- colspan: null
- });
- });
- startIndex=i;
- endIndex=i;
- }
- });
- $.each(rowFildNames, function(k,rowFildName){
- grid.datagrid( 'mergeCells',{
- index: startIndex,
- field: rowFildName,
- rowspan: endIndex -startIndex+1,
- colspan: null
- });
- });
- }
- 参数说明
grid: easyUI的datagrid对象refCols 合并参考列数组,及这些列都相等则合并rowFildNames指定的列rowFildNames: 和并列的field属性值及要合并的列数组 示例:mergeGridColCells($('#serviceTypeTable'),['serviceTypeId','areaId'],['areaName']);
easyUI单元格合并自定义封装的更多相关文章
- asp.net使用控件datagrid实现表头单元格合并
合并的要点: 1.datagid的单元格合并原理是table中tr,td的布局实现; 2.合并的时机实在其datagridcreate事件中实现; 3.认识一个对象TableCellCollectio ...
- SNF快速开发平台MVC-表格单元格合并组件
1. 表格单元格合并组件 1.1. 效果展示 1.1.1. 页面展现表格合并单元格 图 4.1 1.1.2. 导出excel合并单元格 图 4.2 1.2. 调用说 ...
- excel技巧--单元格合并与拆分
如果要将上图的地区列做成下图的合并单一列: 有如下做法: (以下图表格为例) 1.选择要排序的表格,点击“开始”-->排序和筛选-->自定义排序.在对话框选择“业务项目”进行排序: 2.选 ...
- JS:jquery插件表格单元格合并.
公司需要用到单元格合并,于是动手封装了一个简单的jquery插件,封装的函数是直接写好转的,请多多提意见看代码是否有优化的地方..... 截图: 代码: /* * mergeTable 0.1 * C ...
- Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等
目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
- NPOI 教程 - 2.1单元格合并
来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...
- DataGridView单元格合并
本文章转载:http://www.cnblogs.com/xiaofengfeng/p/3382094.html 图: 代码就是如此简单 文件下载:DataGridView单元格合并源码 也可以参考: ...
- devexpress实现单元格合并以及依据条件合并单元格
1.devexpress实现单元格合并非常的简单,只要设置属性[AllowCellMerge=True]就可以了,实现效果如下图: 2.但是在具体要求中并非需要所有的相同单元格都合并,可能需要其他的条 ...
随机推荐
- Java基础(36):String与基本数据类型之间的双向转换(Wrapper类)
Java 中基本类型和字符串之间的转换 在程序开发中,我们经常需要在基本数据类型和字符串之间进行转换. 其中,基本类型转换为字符串有三种方法: 1. 使用包装类的 toString() 方法 2. 使 ...
- 关于VOID *在cl与gcc的不同(无意中发现)
在windows中,void *是不确定类型,CL编译器无法确定其步长 但在linux中,void *默认步长是1
- CentOS 5.5 Nginx+JDK+MySQL+Tomcat(jsp)成功安装案例
在CentOS 5.5中安装Nginx+jdk+mysql+tomcat是非常容易的.只需yum安装环境包和nginx.解压安装jdk和tomcat.配置profile文件.server.xml和ng ...
- ./fedora_install_oracle.sh bad interpreter
错误原因之一很有可能是你的脚本文件是DOS格式的, 即每一行的行尾以\r\n来标识, 其ASCII码分别是0x0D, 0x0A.可以有很多种办法看这个文件是DOS格式的还是UNIX格式的, 还是MAC ...
- demo16Toast
/Users/alamps/AndroidStudioProjects/demo16Toast/demo16Toast/src/main/res/layout/activity_main.xml &l ...
- Android -- 自定义View小Demo(一)
1,现在要实现下图的简单效果,很简单 ,就是使用paint在canvas上绘制5中不同颜色的圆圈,效果图如下: 这是绘制基本图形一种最简单的方法,下面是它的代码 ,注释写的很详细,也就不去讲解了 M ...
- IMapDocument interface
Provides access to members that control the reading and writing of map document files.(提供访问的成员,控制读 ...
- paper 59:招聘
借Valse宝地发条招聘广告:D[腾讯优图]技术大咖招聘 欢迎各位技术大咖尤其应届优秀毕业生投递简历.简历投递:youtu@tencent.com简历投递,邮件标题请按照以下格式:[腾讯_上海_招聘 ...
- ASP.NET MVC的TempData(转载)
本文章基于ASP.NET MVC Preview5. ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个控制器Action间传递临时的数据或者给View传递一些临时的数据,相信 ...
- Java 入门基础
第零章 开始学习Java 1.Java基础最重要 Java学习中,Java的基础.Java面向对象是最关键的,而一些像框架技术等都是建立在基础之上东西. 多多处理问题,积累处理问题的能力. Java框 ...