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 合并单元格
- extjs4.2 grid 合并单元格并居中显示
- ExtJs - grid 合并单元格 跨行跨列
- ExtJs4 - grid 合并单元格 跨行跨列
- extjs 3.3 合并单元格
- ExtJs4.2的合并单元格
- Extjs gridpanel 合并单元格
- ExtJs - grid 合并单元格 跨行跨列
- 27、extjs操作用友华表Cell之合并单元格
- Extjs第一课
- 透彻阐述 ExtJS 4 的MVC【有图有真相】
- Extjs显示图片
- ExtJS+ASP.NET实现Tree节点的拖动(DragDrop)
- EXTJS GridPanel 右键复制当前选中单元格
- ExtJS 2.2事件机制(详细)
- extjs和struts、json的整合
- 在Eclipse中安装使用Extjs插件Spket
- ExtJS 4.2 03 Javascript 中的类
- 使用.Net和ExtJS技术开发的人力资源管理系统