1. 程式人生 > >easyui datagrid單元格合併

easyui datagrid單元格合併

easyUI的單元格合併DEMO。

function onLoadSuccess(data){
			var merges = [{
				index: 2,
				rowspan: 2
			},{
				index: 5,
				rowspan: 2
			},{
				index: 7,
				rowspan: 2
			}];
			for(var i=0; i<merges.length; i++){
				$(this).datagrid('mergeCells',{
					index: merges[i].index,
					field: 'productid',
					rowspan: merges[i].rowspan
				});
			}
		}

接下來改造為動態合併:

function onLoadSuccess(data){
        	var rows = data.rows;
            var merges = new Array();
            
            var temp = "";
            var tempindex = 0;
            var temprowspan = 1;
            var mergesindex=0;
            if(rows.length>0){
            	temp = rows[0].FBillNo;
            }
            for(var i=1;i<rows.length;i++){
            	if(rows[i].FBillNo==temp){
            		temprowspan++;
            		if(i==(rows.length-1)){
            			if(temprowspan>1){
                            merges[mergesindex] = {index:tempindex,rowspan:temprowspan};
                            mergesindex++;
                        }
            		}
            	}else{
            		temp = rows[i].FBillNo;
            		if(temprowspan>1){
            			merges[mergesindex] = {index:tempindex,rowspan:temprowspan};
            			mergesindex++;
            		}
            		tempindex = i;
                    temprowspan = 1;
            	}
            }
            
            for(var i=0; i<merges.length; i++){
                $(this).datagrid('mergeCells',{
                    index: merges[i].index,
                    field: 'FBillNo',
                    rowspan: merges[i].rowspan
                });
            }
        }

將FBillNo改為自己資料中需要合併的欄位即可。注:獲取到前臺的資料需要進行排序。