日期:2014-05-17  浏览次数:20867 次

ext的动态表格-----合并单元格!!!

这是在ext的panel中嵌套了一个jsp页面,所以很丑!!我想是不是可以在ext中直接画这样的表格啊??请高手指教指教!!!

------解决方案--------------------
var viewNodes=null;
 function gridSpan(grid,rownum){
var array1 = new Array();
var minIndex=0;
var maxIndex=0;
var startValue;
var endValue;
var allRecs = grid.getStore().getRange();//所有数据
var count2 = grid.getStore().getCount();
var colName = grid.columns[rownum].dataIndex;// colName.dataIndex
// debugger;
var array1=new Array();
var rowspans=false;
for(var i=0;i<count2-1;i++){
startValue=allRecs[i].data[colName];
endValue=allRecs[i+1].data[colName];
if(startValue==endValue){ //i=10 maxIndex=10 minIndex=0 i=11
rowspans=true;
if(minIndex>i){ 
minIndex=i;
}
if(maxIndex<i){
maxIndex=i;
}

if(i>0&&rowspans){
var pre3=allRecs[i-1].data[colName]; //11 的值
startValue // 12 的值
endValue // 13 的值
if(pre3!=endValue){///这是合并两个的
maxIndex=maxIndex+1;
// alert("minIndex="+minIndex+" manIndex="+maxIndex);
rowSpan(grid,minIndex,maxIndex,rownum);//合并两个相等的
rowspans=false;

}else{
if(i==(count2-2)){
maxIndex=maxIndex+1;
// alert("minIndex="+minIndex+" manIndex="+maxIndex);
rowSpan(grid,minIndex,maxIndex,rownum);//最后两个相等的
rowspans=false;

}
}
}
}
else{
if(rowspans){
maxIndex=maxIndex+1;
// alert("minIndex="+minIndex+" manIndex="+maxIndex);
rowSpan(grid,minIndex,maxIndex,rownum);//最后两个相等的
minIndex=i+1;//12
rowspans=false;
i++;
}else{
minIndex=i+1;
}
}

}
function rowSpan(grid,startindex,endindex,rownum){
//viewNodes=grid.getView().getNodes();
//debugger;
// alert(viewNodes.length);
if(viewNodes!=null&&viewNodes!=""&&typeof(viewNodes)!='undefined'){

if(endindex>startindex&&rownum>-1){

var rows=endindex-startindex+1;
if(rows>=2){
var cell=viewNodes[startindex].childNodes; 
for(var i=startindex+1;i<=endindex;i++){
viewNodes[i].deleteCell(rownum); //把需要合并的行除第一行之外td移去 
}
cell[rownum].rowSpan=rows;
}
}
}

}

function tableRowSpan(store,grid,rownum,ps){ // 多列使用时 rownum 必须从高到底使用 (下表从零开始的) 如 ableRowSpan(store,grid,1);ableRowSpan(store,grid,0) rownum 是数组
store.on("load",function(store,record,q,s) {
var task = new Ext.util.DelayedTask(function(){
viewNodes=grid.getView().getNodes();
gridSpan(grid,rownum);  
});
task.delay(100);
});
}


调用这个tableRowSpan 方法就可以咯!