EasyUI DataGrid 相同連續列合併
阿新 • • 發佈:2018-11-14
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!
$.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function() { var target = $(this); if (!fields) { fields = target.datagrid("getColumnFields" ); } var rows = target.datagrid("getRows"); var i = 0, j = 0 , temp = {}; for (i; i < rows.length; i++) { var row = rows[i]; j = 0; for (j; j < fields.length; j++) { var field = fields[j]; var tf = temp[field]; if (!tf) { tf = temp[field] = {}; tf[row[field]] = [i]; } else { var tfv = tf[row[field]]; if (tfv) { tfv.push(i); } else { tfv = tf[row[field]] = [i]; } } } } $.each(temp, function(field, colunm) { $.each(colunm, function() { var group = this; if (group.length > 1) { var before, after, megerIndex = group[0]; for (var i = 0; i < group.length; i++) { before = group[i]; after = group[i + 1]; if (after && (after - before) == 1) { continue; } var rowspan = before - megerIndex + 1; if (rowspan > 1) { target.datagrid('mergeCells', { index: megerIndex, field: field, rowspan: rowspan }); } if (after && (after - before) != 1) { megerIndex = after; } } } }); }); }); }});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
使用方法
在datagrid的onLoadSuccess事件裡面進行呼叫,可以實現資料載入完成後,自動合併。也可以手動呼叫該方法。
$('#dg').datagrid({ url: 'datagrid_data.json', onLoadSuccess: function(data) { //所有列進行合併操作 //$(this).datagrid("autoMergeCells"); //指定列進行合併操作 $(this).datagrid("autoMergeCells", ['groupId', 'commId']); }});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
效果展示