Extjs 合并单元格

最新推荐文章于 2025-06-06 08:43:31 发布

zdk81053

最新推荐文章于 2025-06-06 08:43:31 发布

阅读量467

点赞数

CC 4.0 BY-SA版权

文章标签： json

本文链接：https://blog.youkuaiyun.com/zdk81053/article/details/84735850

这篇博客介绍了如何在ExtJS中使用JsonStore加载数据后，通过自定义方法`com.midea.cto.comm.utils.mergeCells`实现表格的单元格合并。首先，文章展示了如何配置JsonStore来从指定URL获取JSON数据，然后在数据加载完成后调用合并方法，传入需要合并的列索引。接着，详细解释了`mergeCells`方法的内部逻辑，包括遍历行、检查单元格内容、合并单元格和隐藏被合并的单元格等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.调用

store: new Ext.data.JsonStore({
       fields: ["confType","confName","optionName","isdefault"],
       proxy: {
                    type: 'ajax',
                    url:/*'groupGrid.json'*/rootPath+'servlet/midearest/gplm/wo/abroadOrderConf',
                    reader: {
                        type: 'json' , //返回数据类型为json格式
                    root: 'rows', //数据（json格式）
                        totalProperty: 'total' //数据总条数
                    }
                },
      listeners:{
       load:function(store ,records ,options ){
        var grid = Ext.getCmp('boutineThreeGrid');
        com.midea.cto.comm.utils.mergeCells(grid,[2]);
       }
      }
     }),

2.公用方法

com.midea.cto.comm.utils.mergeCells = function(grid,cols){
    var arrayTr=document.getElementById(grid.getId()+"-body").firstChild.firstChild.firstChild.getElementsByTagName('tr');
    var trCount = arrayTr.length;
    var arrayTd;
    var td;
    var merge = function(rowspanObj,removeObjs){ //定义合并函数
       if(rowspanObj.rowspan != 1){
            arrayTd =arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行
           td=arrayTd[rowspanObj.td-1];
           td.rowSpan=rowspanObj.rowspan;
           td.vAlign="middle";
           Ext.each(removeObjs,function(obj){ //隐身被合并的单元格
                arrayTd =arrayTr[obj.tr].getElementsByTagName("td");
                arrayTd[obj.td-1].style.display='none';
           });
        }
    };
    var rowspanObj = {}; //要进行跨列操作的td对象{tr:1,td:2,rowspan:5}
    var removeObjs = []; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}]
    var col;
    Ext.each(cols,function(colIndex){ //逐列去操作tr
        var rowspan = 1;
        var divHtml = null;//单元格内的数值
        for(var i=1;i<trCount;i++){ //i=0表示表头等没用的行
            arrayTd = arrayTr[i].getElementsByTagName("td");
            var cold=0;
            col=colIndex+cold;//跳过RowNumber列和check列
            if(!divHtml){
                divHtml = arrayTd[col-1].innerHTML;
               rowspanObj = {tr:i,td:col,rowspan:rowspan}
            }else{
                var cellText = arrayTd[col-1].innerHTML;
                var addf=function(){
                   rowspanObj["rowspan"] = rowspanObj["rowspan"]+1;
                    removeObjs.push({tr:i,td:col});
                    if(i==trCount-1)
                        merge(rowspanObj,removeObjs);//执行合并函数
                };
                var mergef=function(){
                    merge(rowspanObj,removeObjs);//执行合并函数
                    divHtml = cellText;
                   rowspanObj = {tr:i,td:col,rowspan:rowspan}
                    removeObjs = [];
                };
                if(cellText == divHtml){
                    if(colIndex!=cols[0]){
                        var leftDisplay=arrayTd[col-2].style.display;//判断左边单元格值是否已display
                        if(leftDisplay=='none')
                            addf();
                       else
                            mergef();
                    }else
                        addf();
                }else
                    mergef();
            }
        }
    });
};