Easyui-DataGrid-automatically merge cells ()

1. Objectives

1.1 after the table Initialization is complete, the rows to be merged are automatically merged;

1.2 click the sort field and merge it again;

2. Implementation

2.1 introduce plug-ins

/*** Author ____ '* Create date 2012-11-5 ***/$. 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 ;}}}});});});}});

2.2html code

<table id="simpleDgId" style="height: 300px" />

2.3js code

VaR sortflag = false; $ ('# simpledgid'). DataGrid ({URL: "testcontroller. do? DataGrid ", fitcolumns: True, singleselect: True, remotesort: false, columns: [{field:" Age ", title:" Age ", width: 25, align: 'center', sortable: true}, {field: "username", title: "name", width: 25, align: 'center', sortable: true}, {field: "mobilephone", title: "Mobile Phone", width: 25, align: 'center', sortable: true}], onsortcolumn: function (sort, order) {sortflag = true; if ("username" = sort) {$ (this ). dataGrid ("automergecells", [sort]) ;} Else {$ (this). DataGrid ("automergecells") ;}}, onloadsuccess: function (data) {If (! Sortflag) $ (this). DataGrid ("automergecells ");}});

2.4 background

URL: "testcontroller. do? DataGrid"

Background Data is common table data, which is not described here

2.5 results