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改为自己数据中需要合并的字段即可。注:获取到前台的数据需要进行排序。

猜你喜欢

转载自blog.csdn.net/CHN_Li/article/details/83621294