文档章节

extjs4 grid 合并单元格

leirane
 leirane
发布于 2014/12/18 15:13
字数 503
阅读 178
收藏 1
//传入要合并的grid,和要合并的列,cloArr为数组,如[0,1,2]    
function  mergeCells(grid, colArr){
    var gridNextTd;

    var n=0;//n是 始终记住要合并单元格的第一个值的标志
    var currentTdValue;//要合并起始单元格的值
    var currentTd;   //当前单元格
    var preTdValue; //前一个单元格的值
    var preCurrentTdValue;// 要合并起始单元格的前一个值
    //找到grid的所有行
    var gridTrArr = document.getElementById(grid.getId() + "-body").firstChild.firstChild.getElementsByTagName("tr");
    //循环要合并的列
    for (var j = 0; j < colArr.length; j++) {
        var count= 0;
        //遍历grid的所有行
        for (var i = 0; i < gridTrArr.length; i++) {
            //查找grid某一行的所有列
            var gridTdArr = gridTrArr[i].getElementsByTagName("td");
            if(colArr[j]>0){
                //var preGridTdArr=gridTrArr[i-1].getElementsByTagName("td");
                //获取当前单元格,前一列的值
                preCurrentTdValue=gridTdArr[colArr[j]-1].getElementsByTagName("div")[0].textContent;
            }
            //记住要合并的第一个单元格的值
            if(n==i){
                currentTd=gridTdArr[colArr[j]];
                currentTdValue= gridTdArr[colArr[j]].getElementsByTagName("div")[0].textContent;
                if(colArr[j]>0){
                    preTdValue = gridTdArr[colArr[j]-1].getElementsByTagName("div")[0].textContent;
                }
                count++;
                continue;
            }
            //获取这一行中要合并的这一列的值
            var gridTdValue=gridTdArr[colArr[j]].getElementsByTagName("div")[0].textContent;
            if(currentTdValue===gridTdValue){
                //若是本列中,这两行相等,前一列中,这两行不相等,则不应该合并
                if(preTdValue==null||preTdValue===preCurrentTdValue){
                    gridTdArr[colArr[j]].style.display="none";
                    count++;
                }
                //若是不相等,则合以上的单元格
                else{
                    currentTd.rowSpan=count;
                    currentTd.style.verticalAlign="middle";
                    n=i;
                    i--;
                    count=0;
                }
                //第一页合并完毕
                if(i==gridTrArr.length-1){
                    //第二页n清0
                    n=0;
                    currentTd.rowSpan=count;
                    currentTd.style.verticalAlign="middle";
                }
            }else{
                n=i;
                //比较最后一次,i会自动+1,所以此处减一
                i--;
                //若是本列中,这两行相等,前一列中,这两行不相等,则不应该合并,判断null是为了,复选框的情况
//                if(preTdValue==null||preTdValue===preCurrentTdValue) {
                    currentTd.rowSpan = count;
                    currentTd.style.verticalAlign = "middle";
//                }
                //count清0
                count = 0;
            }
        }
    }
}


© 著作权归作者所有

leirane
粉丝 2
博文 3
码字总数 1670
作品 0
济南
私信 提问
加载中

评论(4)

leirane
leirane

引用来自“曾经帅的一笔”的评论

我用的ext4.2 报document.getElementById(...).firstChild.firstChild is null错误
你可以这样试试,给你的grid手动添加id,然后将document.getElementById(“换成你设置的id”)
leirane
leirane

引用来自“曾经帅的一笔”的评论

题主用的ext的哪一个版本呀
ext4.x
曾经帅的一笔
曾经帅的一笔
我用的ext4.2 报document.getElementById(...).firstChild.firstChild is null错误
曾经帅的一笔
曾经帅的一笔
题主用的ext的哪一个版本呀
银光电子表格控件Essential Grid for Silverlight详细介绍

Essential Grid for Silverlight控件包含一个高性能的数据绑定和面向单元格的表格控件,支持滚动和实时更新、多种单元格类型、分组、多列排序、过滤、多层显示和统计功能,冻结行和列、插入公...

baobiaokongjian
2014/06/05
0
0
easyUI datagrid动态绑定合并单元格数据

需求需要进行grid的表头的合并,合并下的子单元格是动态生成的,是从数据库中查询出来的,这里的我已经实现了,如图: 下面几个子单元格是我从数据库中查出来动态的绑定生成的,但是数据怎么...

蜡笔小新_
2014/06/05
539
2
easyUI datagrid中列的field属性可以直接绑定数据库字段吗?

需求需要进行grid的表头的合并,合并下的子单元格是动态生成的,是从数据库中查询出来的,这里的我已经实现了,如图: 下面几个子单元格是我从数据库中查出来动态的绑定生成的,但是数据怎么...

蜡笔小新_
2014/06/06
4.2K
1
Spring MVC 使用Json格式传输数据,XXX.xxx 的嵌套数据无法解析

后台使用的是 Spring MVC RESTful + 前台 ExtJs4 REST数据代理,交互格式是JSON,使用Jackson进行数据解析。现在出现的问题是后台只能接受 类似下面的纯Json数据: 类似这种这种数据格式: ...

Mr_Kail
2014/08/10
2.7K
4
extjs5单元格合并

用extjs5做表格,遇到需要合并单元格的情况,在网上搜索了很多资料,并没有切实可行明确的办法。根据网上的方案做了一些调试,并没能成功。在前端debug的时候,我发现extjs的grid产生的html源...

秦拿希
2015/12/12
892
2

没有更多内容

加载失败,请刷新页面

加载更多

Visual Paradigm 教程[UML]:如何绘制封装图?(上)

下载Visual Paradigm最新试用版 查看本教程视频文件 在项目开始时,您只有有限数量的图表,一切都简单而美观。然而,当时间过得匆匆时,已经创建了越来越多的图表,并且它们开始变得无法管理...

xiaochuachua
28分钟前
0
0
Pure-ftpd服务安装及虚拟用户设置

安装 sudo apt-get install pure-ftpd 虚拟用户设置 首先,可以在系统中添加相应的用户和组,如用户ftpuser 和组ftpgroup ,专门用来管理ftp服务。也可以是能登录系统的用户,但最好是不能登...

Gm_ning
29分钟前
0
0
一位面试了阿里,滴滴,网易,蚂蚁金服,最终有幸去了网易的Java程序员【面试题分享】

前言 15年毕业到现在也近三年了,最近面试了阿里集团(菜鸟网络,蚂蚁金服),网易,滴滴,点我达,最终收到点我达,网易offer,蚂蚁金服二面挂掉,菜鸟网络一个月了还在流程中... 最终有幸去...

Java领航员
31分钟前
1
0
“大团队”和“敏捷开发”,谁说不可兼得?

阿里妹导读:当小团队的产出跟不上业务需要,团队就面临规模化的问题。从1个团队到3个团队,仍可以通过简单的团队沟通保持高效协作。当产品复杂到需要5个以上团队同时开发时,我们需要一定的...

阿里云云栖社区
35分钟前
0
0
基于虹软人脸识别Demo android人脸识别

参加一个比赛,指定用虹软的人脸识别功能,奈何虹软人脸识别要自己建人脸库,不然就只能离线用,总不能装个样子,简单看了下虹软Demo,下面决定用这种简单方法实现在线人脸识别: Android端(...

是哇兴哥棒棒哒
40分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部