ext表格合并单元格的方法
//合并表头的方法extjs的官网上有，这里提供的是合并数据单元格的方法
?
//首先在页面上添加以下内容
<style>?
?/*与表头对齐*/
??.x-grid3-row td, .x-grid3-summary-row td{
??????? padding-right: 0px;
??????? padding-left: 0px;
??????? padding-top: 0px;
??????? padding-bottom: 0px;
??? }
??? /*去掉行间空白*/
??? .x-grid3-row {
??? ?border-right-width: 0px;
??? ?border-left-width: 0px;
??????? border-top-width: 0px;
??????? border-bottom-width: 0px;
?}
</style>
?
//然后在表格加载数据时调用下面的函数
//合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：grid.on('load',function(){gridSpan(grid,'row','1px solid #8080FF');});//参数：grid-需要合并的表格,rowOrCol-合并行还是列,borderStyle-合并后单元格分隔线样式function gridSpan(grid, rowOrCol, borderStyle){var array1 = new Array();var count1 = 0;var count2 = 0;var index1 = 0;var index2 = 0;var aRow = undefined;var preValue = undefined;var firstSameCell = 0;var allRecs = grid.getStore().getRange();if(rowOrCol == 'row'){count1 = grid.getColumnModel().getColumnCount();count2 = grid.getStore().getCount();} else {count1 = grid.getStore().getCount();count2 = grid.getColumnModel().getColumnCount();}for(i = 0; i < count1; i++){preValue = undefined;firstSameCell = 0;array1[i] = new Array();for(j = 0; j < count2; j++){if(rowOrCol == 'row'){index1 = j;index2 = i;} else {index1 = i;index2 = j;}var colName = grid.getColumnModel().getColumnId(index2);if(allRecs[index1].get(colName) == preValue){allRecs[index1].set(colName, ' ');array1[i].push(j);if(j == count2 - 1){var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);if(rowOrCol == 'row'){allRecs[index].set(colName, preValue);} else {allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);}}} else {if(j != 0){var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);if(rowOrCol == 'row'){allRecs[index].set(colName, preValue);} else {allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);}}firstSameCell = j;preValue = allRecs[index1].get(colName);allRecs[index1].set(colName, ' ');if(j == count2 - 1){allRecs[index1].set(colName, preValue);}}}}grid.getStore().commitChanges();//添加所有分隔线for(i = 0; i < grid.getStore().getCount(); i ++){for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){aRow = grid.getView().getCell(i,j);aRow.style.borderTop = borderStyle;aRow.style.borderLeft = borderStyle;}}//去除合并的单元格的分隔线for(i = 0; i < array1.length; i++){for(j = 0; j < array1[i].length; j++){if(rowOrCol == 'row'){aRow = grid.getView().getCell(array1[i][j],i);aRow.style.borderTop = 'none';} else {aRow = grid.getView().getCell(i, array1[i][j]);aRow.style.borderLeft = 'none';}}}}?
?
?
注意：表格太大时可能导致页面暂时失去响应，稍等即可
合并后的效果：附件
?
1 楼 ct_xiao0310 2010-08-23 可以发送一个能运行的例子吗？我的邮箱307851104qq.com 谢谢！ 2 楼 hyw100200 2011-11-04 我用的假数据 一直没法调用load事件 3 楼 hyw100200 2011-11-04 能给个完整代码吗 hyw100200@163.com 谢谢 4 楼 eung 2012-02-06 求完整代码 78086473@qq.com 非常感谢!! 5 楼 eung 2012-02-07 grid.on('load',function(){gridSpan(grid,'row','1px solid #8080FF');});是错误的,应该是用STORE.只有STORE才有ON事件.加载成功,只是样式还有问题.大伙一起研究一下. 6 楼 one_sandy 2012-02-25 能发一个例子给我吗？邮箱1197641453@qq.com