easyui datagrid單元格合併
阿新 • • 發佈:2018-11-14
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改為自己資料中需要合併的欄位即可。注:獲取到前臺的資料需要進行排序。