zoukankan      html  css  js  c++  java
  • ExtJs4grid合并行

    在做项目的时候,要求多行的同列数据相同进行合并,ExtJs4并没有原生的支持,网上有些方法可以供使用,它可以将我们传入的gird进行指定列相同数据行进行合并,记录如下:

    /*
    *合并行
    *grid被格式化的表格
    *cols要合并的列,数组类型,如[1,2] 合并第1列和第2列
    */
    var
    mergeCells = function(grid,cols){ var arrayTr=document.getElementById(grid.getId()+"-body").getElementsByTagName('tbody')[0].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 = {}; var removeObjs = []; var col; Ext.each(cols,function(colIndex){ var rowspan = 1; var divHtml = null; for(var i=0;i<trCount;i++){ arrayTd = arrayTr[i].getElementsByTagName("td"); var cold=0; col=colIndex+cold; 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; if(leftDisplay=='none') addf(); else mergef(); }else addf(); }else mergef(); } } }); };

    使用时只需调用该方法即可进行格式化显示,调用示例如下:

            //调用方法合并行
            grid.getStore().on('load',function(){  
                //调用方法合并相同行数据
                mergeCells(grid,[1,2]);  
             });        
  • 相关阅读:
    nginx安装
    Mybatis使用generator自动生成映射配置文件信息
    Mysql报错Fatal error: Can't open and lock privilege tables: Table 'mysql.host' doesn't exist
    JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
    js获取select标签选中的值
    linux下使用ffmpeg将amr转成mp3
    String与InputStream互转的几种方法
    javascript,检测对象中是否存在某个属性
    SQL语句在查询分析器中可以执行,代码中不能执行
    shell实现SSH自动登陆
  • 原文地址:https://www.cnblogs.com/javayuan/p/5793550.html
Copyright © 2011-2022 走看看