1、指定列的行合并

* 效果图:

 

* 程序:

  1. function mergeGridColCells(grid,rowFildName)
  2. {
  3. var rows=grid.datagrid('getRows' );
  4. //alert(rows.length);
  5. //alert(rows[1][rowFildName]);
  6. var startIndex=0;
  7. var endIndex=0;
  8. if(rows.length< 1)
  9. {
  10. return;
  11. }
  12. $.each(rows, function(i,row){
  13. if(row[rowFildName]==rows[startIndex][rowFildName])
  14. {
  15. endIndex=i;
  16. }
  17. else
  18. {
  19. grid.datagrid( 'mergeCells',{
  20. index: startIndex,
  21. field: rowFildName,
  22. rowspan: endIndex -startIndex+1
  23. });
  24. startIndex=i;
  25. endIndex=i;
  26. }
  27. });
  28. grid.datagrid( 'mergeCells',{
  29. index: startIndex,
  30. field: rowFildName,
  31. rowspan: endIndex -startIndex+1
  32. });
  33. }
 
*参数说明

grid:        easyUI的datagrid对象
rowFildName: 和并列的field属性值
 
 
 
  1. 源代码如下:

    1. function mergeGridColCells(grid,refCols,rowFildNames)
    2. {
    3. var rows=grid.datagrid('getRows' );
    4. //alert(rows.length);
    5. //alert(rows[1][rowFildName]);
    6. var flag=false ;
    7. var startIndex=0;
    8. var endIndex=0;
    9. if(rows.length< 1)
    10. {
    11. return;
    12. }
    13. $.each(rows, function(i,row){
    14. $.each(refCols, function(j,refCol){
    15. if(row[refCol]!=rows[startIndex][refCol])
    16. {
    17. flag= false;
    18. return false ;
    19. }
    20. else
    21. {
    22. flag= true;
    23. }
    24. });
    25. //if(row[rowFildName]==rows[startIndex][rowFildName])
    26. if(flag)
    27. {
    28. endIndex=i;
    29. }
    30. else
    31. {
    32. $.each(rowFildNames, function(k,rowFildName){
    33. grid.datagrid( 'mergeCells',{
    34. index: startIndex,
    35. field: rowFildName,
    36. rowspan: endIndex -startIndex+1,
    37. colspan: null
    38. });
    39. });
    40. startIndex=i;
    41. endIndex=i;
    42. }
    43. });
    44. $.each(rowFildNames, function(k,rowFildName){
    45. grid.datagrid( 'mergeCells',{
    46. index: startIndex,
    47. field: rowFildName,
    48. rowspan: endIndex -startIndex+1,
    49. colspan: null
    50. });
    51. });
    52. }
  2. 参数说明
    grid:        easyUI的datagrid对象

    refCols        合并参考列数组,及这些列都相等则合并rowFildNames指定的列
    rowFildNames: 和并列的field属性值及要合并的列数组

  3.  
    示例:mergeGridColCells($('#serviceTypeTable'),['serviceTypeId','areaId'],['areaName']);

easyUI单元格合并自定义封装的更多相关文章

  1. asp.net使用控件datagrid实现表头单元格合并

    合并的要点: 1.datagid的单元格合并原理是table中tr,td的布局实现; 2.合并的时机实在其datagridcreate事件中实现; 3.认识一个对象TableCellCollectio ...

  2. SNF快速开发平台MVC-表格单元格合并组件

    1.   表格单元格合并组件 1.1.      效果展示 1.1.1.    页面展现表格合并单元格 图 4.1 1.1.2.    导出excel合并单元格 图 4.2 1.2.      调用说 ...

  3. excel技巧--单元格合并与拆分

    如果要将上图的地区列做成下图的合并单一列: 有如下做法: (以下图表格为例) 1.选择要排序的表格,点击“开始”-->排序和筛选-->自定义排序.在对话框选择“业务项目”进行排序: 2.选 ...

  4. JS:jquery插件表格单元格合并.

    公司需要用到单元格合并,于是动手封装了一个简单的jquery插件,封装的函数是直接写好转的,请多多提意见看代码是否有优化的地方..... 截图: 代码: /* * mergeTable 0.1 * C ...

  5. Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

    目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...

  6. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  7. NPOI 教程 - 2.1单元格合并

    来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...

  8. DataGridView单元格合并

    本文章转载:http://www.cnblogs.com/xiaofengfeng/p/3382094.html 图: 代码就是如此简单 文件下载:DataGridView单元格合并源码 也可以参考: ...

  9. devexpress实现单元格合并以及依据条件合并单元格

    1.devexpress实现单元格合并非常的简单,只要设置属性[AllowCellMerge=True]就可以了,实现效果如下图: 2.但是在具体要求中并非需要所有的相同单元格都合并,可能需要其他的条 ...

随机推荐

  1. Java基础(36):String与基本数据类型之间的双向转换(Wrapper类)

    Java 中基本类型和字符串之间的转换 在程序开发中,我们经常需要在基本数据类型和字符串之间进行转换. 其中,基本类型转换为字符串有三种方法: 1. 使用包装类的 toString() 方法 2. 使 ...

  2. 关于VOID *在cl与gcc的不同(无意中发现)

    在windows中,void *是不确定类型,CL编译器无法确定其步长 但在linux中,void *默认步长是1

  3. CentOS 5.5 Nginx+JDK+MySQL+Tomcat(jsp)成功安装案例

    在CentOS 5.5中安装Nginx+jdk+mysql+tomcat是非常容易的.只需yum安装环境包和nginx.解压安装jdk和tomcat.配置profile文件.server.xml和ng ...

  4. ./fedora_install_oracle.sh bad interpreter

    错误原因之一很有可能是你的脚本文件是DOS格式的, 即每一行的行尾以\r\n来标识, 其ASCII码分别是0x0D, 0x0A.可以有很多种办法看这个文件是DOS格式的还是UNIX格式的, 还是MAC ...

  5. demo16Toast

    /Users/alamps/AndroidStudioProjects/demo16Toast/demo16Toast/src/main/res/layout/activity_main.xml &l ...

  6. Android -- 自定义View小Demo(一)

    1,现在要实现下图的简单效果,很简单  ,就是使用paint在canvas上绘制5中不同颜色的圆圈,效果图如下: 这是绘制基本图形一种最简单的方法,下面是它的代码 ,注释写的很详细,也就不去讲解了 M ...

  7. IMapDocument interface

      Provides access to members that control the reading and writing of map document files.(提供访问的成员,控制读 ...

  8. paper 59:招聘

     借Valse宝地发条招聘广告:D[腾讯优图]技术大咖招聘 欢迎各位技术大咖尤其应届优秀毕业生投递简历.简历投递:youtu@tencent.com简历投递,邮件标题请按照以下格式:[腾讯_上海_招聘 ...

  9. ASP.NET MVC的TempData(转载)

    本文章基于ASP.NET MVC Preview5. ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个控制器Action间传递临时的数据或者给View传递一些临时的数据,相信 ...

  10. Java 入门基础

    第零章 开始学习Java 1.Java基础最重要 Java学习中,Java的基础.Java面向对象是最关键的,而一些像框架技术等都是建立在基础之上东西. 多多处理问题,积累处理问题的能力. Java框 ...