`
zdk8105
  • 浏览: 37926 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Extjs 合并单元格

 
阅读更多

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();            
            } 
        } 
    });  
};

分享到:
评论

相关推荐

    extjs合并单元格

    标题中的“extjs合并单元格”指的是在使用Ext JS这个JavaScript框架时,如何实现表格(Grid)中的单元格合并功能。Ext JS是一个用于构建富客户端Web应用的前端框架,提供了丰富的组件库,其中包括数据网格(Data ...

    ExtJS GRID单元格合并

    通过修改`cellTpl`,我们可以实现合并单元格的样式。例如,我们可以添加一个条件判断来决定是否应用合并样式: ```javascript viewConfig: { cellTpl: '&lt;td class="{tdCls}" {rowspanAttr} {colspanAttr}&gt;{value}...

    extjs单元格合并

    EXTJS单元格合并 EXTJS单元格合并是指在EXTJS GridPanel中实现单元格合并的功能。单元格合并可以使得GridPanel中的数据显示更加简洁和清晰。下面将详细介绍EXTJS单元格合并的实现方法。 一、加入CSS样式 在实现...

    100行代码解决ExtJs4.1合并单元格问题

    100行代码解决ExtJs4.1合并单元格问题

    ext表格合并单元格的方法

    ### ext表格合并单元格的方法 #### 背景与概述 在进行Web开发时,特别是在使用Ext JS框架处理表格数据展示的过程中,经常会遇到需要合并单元格的情况。这不仅可以提升数据展示的美观性,还能增强数据的可读性和...

    Ext grid合并单元格

    根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...

    ExtJS 4.2 Grid组件单元格合并的方法

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

    grid 合并单元格示例

    实现grid单元格重复数据的合并,完整的案例实现,包含合并方法和调用过程

    Extjs 实现多行合并(rowspan)效果

    在ExtJS中实现多行合并(rowspan)的效果,通常是为了在数据表格中展示具有层次结构的数据,或者在某些特定情况下需要对表格行进行合并,以优化数据的展示。这通常涉及到对表格(GridPanel)的配置和自定义。下面...

    extjs3合并表头 rowspan

    "rowspan"属性在HTML表格中被用来合并行,而在ExtJS 3中,它用于实现类似的功能,即在数据网格的表头中合并单元格,以创建更复杂的布局和更清晰的数据组织。 在ExtJS 3中,如果你需要合并表头,你可能会使用`Ext....

    Extjs表格合并代码

    在本文中,我们将深入探讨如何在ExtJS框架中实现表格单元格的合并,以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库,用于构建富客户端应用程序,其表格组件是功能丰富的数据展示工具...

    EXTjs4.0以下合并表格

    3. **CellMerge**: EXTjs并没有直接提供合并单元格的API,但可以通过自定义插件或扩展实现。基本思路是在渲染单元格时检查相邻单元格的内容,如果相同则合并。这通常涉及到`renderer`函数的使用,这个函数可以定制...

    基于Extjs5.1的列表封装

    1. **自定义列渲染**:可能包含了对列头的定制,如添加图标、链接或颜色标记,或者实现复杂的单元格数据格式化。 2. **排序和过滤**:可能内置了数据排序和过滤机制,使得用户可以根据需求动态调整表格中的数据展示...

    ExtJs4.0跨行合并(按照指定列合并)(Ext.net 2.0)

    在本文中,我们将深入探讨如何在ExtJS 4.0框架下实现跨行合并功能,特别是在表格组件(GridPanel)中按照指定列进行合并。这个技术对于数据展示和报告生成非常有用,因为它可以帮助用户更清晰地理解数据结构。我们将...

    extjs 列表基本操作

    合并单元格通常在需要显示汇总信息或者有跨列需求时使用。EXTJS提供了一个名为`column.renderCell`的模板方法,通过在该方法内处理返回值,可以实现单元格的合并。同时,需要配合`column.header`中的`align`属性和`...

    ExtJs纵坐标值重复问题的解决方法

    在许多图表库中,如果坐标轴的值是连续的或者分布过于紧密,就会自动应用某种策略来合并或省略标签,以避免过于拥挤。作者发现,一旦注释掉了`labelRenderer`,纵坐标值的重复问题就解决了。这也暗示该版本的ExtJs在...

    extjs-merge-cell-grid

    ExtJS Grid 合并单元格使用的ExtJS版本为4.2.1.883主要配置viewConfig: { mergeColumns: 'cat1&gt;cat2|cat2_desc' // 先按cat1合并,再按cat2合并,cat2_desc按cat2合并}

Global site tag (gtag.js) - Google Analytics