欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

easyui datagrid单元格合并

程序员文章站 2022-07-13 14:30:29
...

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