ExtJs grid合并单元格

Extjs grid合并单元格

extjs中，如果要输出一些有合并单元格的表格，要怎么做呢？如图所示：

从网上找了个例子，其主要思想是表格的store装载完毕后，随即对这个grid的td进行一个个的控制，用的方法也是原始的javascript方法。

我针对目前在做的项目，做了一些修改。

//grid的storevar gridStore = new Ext.data.Store({ autoDestroy: true, pageSize: 25, model: 'myGridModel', proxy: { type: 'ajax', url: 'report.aspx?action=GetList', reader: { root: 'topics', totalProperty: 'totalCount' }, simpleSortMode: true }, remoteSort: true , listeners: { load: function () {//该store装载完毕即执行以下方法： afterListStoreLoad(); } }});

function afterListStoreLoad() { mergeCells(Ext.getCmp("grid1"), [0, 1, 2, 3], 1, function (cellText, sumText, i, col) {//匿名函数，对应function mergeCells(grid,cols,groupcol,setText)的参数setText //在调用方设置一个匿名函数，主要是因为需要合并单元格的列有各种情况，比如有的需要合计，有的属分组，有的是rownumber，不同的情况，对应不同的处理。//如果要通过参数来一一指定类型，好让函数来处理的话，会非常麻烦。但通过匿名函数， 将处理留给调用方自行决定，不仅代码节省，逻辑也更清晰。 var text; if (0 == col) {//行号 text = i; } else if (2 == col || 3 == col) { if (cellText.length == 0) { cellText = 0; } if (sumText.length == 0) { sumText = 0; } text = sumText * 1 + cellText * 1; } else { text = cellText; } return text; });}/** * 合并单元格 * @param {} grid 要合并单元格的grid对象 * @param {} cols 要合并哪几列 [1,2,4] ,列号由左到右，从rownumber列算起，起始号码为0* @param {} groupcol 分组列。为简单起见，目前只支持一个列。以后可以扩充到多列*/function mergeCells(grid,cols,groupcol,setText) { var arrayTr = document.getElementById(grid.getId() + "-body").firstChild.firstChild .getElementsByTagName('tr'); var trCount = arrayTr.length; var rowspanObj = {}; //要进行跨列操作的td对象{ tr: 1,td: 2,rowspan: 5,text: 0 } var removeObjs = []; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}] var rowNumber = 1; var merge = function () { //定义合并函数 if (rowspanObj.rowspan != 1) { var arrayTd = arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行 var td = arrayTd[rowspanObj.td]; td.rowSpan = rowspanObj.rowspan; td.innerText = rowspanObj.text; td.vAlign = "middle"; td.align = "center"; Ext.each(removeObjs, function (obj) { //隐身被合并的单元格 arrayTd = arrayTr[obj.tr].getElementsByTagName("td"); arrayTd[obj.td].style.display = 'none'; }); } }; var addf = function (cellText, i, col) {//添加一条待合并行 rowspanObj["rowspan"] = rowspanObj["rowspan"] + 1; rowspanObj["text"] = setText(cellText, rowspanObj["text"], rowNumber, col); removeObjs.push({ tr: i, td: col }); if (i == trCount - 1) merge(); }; var mergef = function (cellText,i,col) {//合并上一个分组，并开启下一个分组 merge(); rowspanObj = { tr: i, td: col, text: cellText, rowspan: 1 }; removeObjs = []; rowNumber++; }; Ext.each(cols, function (colIndex) { //逐列去操作tr var col = colIndex; var groupText; var arrayTd; if (trCount > 0) { arrayTd = arrayTr[0].getElementsByTagName("td"); groupText = arrayTd[groupcol].innerText; rowspanObj = { tr: 0, td: col, text: arrayTd[col].innerText, rowspan: 1 } for (var i = 1; i < trCount; i++) { arrayTd = arrayTr[i].getElementsByTagName("td"); var cellText = arrayTd[col].innerText; if (arrayTd[groupcol].innerText == groupText) { addf(cellText, i, col); } else {//合并列 mergef(cellText, i, col); groupText = arrayTd[groupcol].innerText; } } } });};

参考文章：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。