EasyUI-dynamic and selective merge of multiple rows in the DataGrid, and easyui-multi-row in the datagrid

EasyUI-dynamic and selective merge of multiple rows in the DataGrid, and easyui-multi-row in the datagrid

JQuery EasyUI has a very useful data list control, that is, the DataGrid Control, which is passed to the control in a certain json format in the background and displayed on the foreground. The function is very powerful, however, you may need to merge multiple rows in this way. For example, if you want to merge the same department fields in the list to achieve the same effect in Excel, and sometimes merge more than this field, other fields are merged based on the same content or the IDs of other fields.
There is no similar Demo on the official website, which may be encountered during development. Generally, we dynamically splice them into a table. In fact, the DataGrid provided on the official website can be used to MERGE table actions when the datagrid is displayed. HoweverThe queried data needs to "arrange" the merged data rows..
First, we <table> Add an attribute data-options = "onLoadSuccess: mergeCells". mergeCells is the corresponding JS method name, which means to execute this mergeCells method after the data is loaded successfully by the datagrid, mergeCells is defined as follows:

// After the datagrid is loaded, merge the specified cell function mergeCells (data) {var arr = [{mergeFiled: "SERIALNUM", premiseFiled: "PROJECTID "}, // merge the field array of the column and the corresponding prerequisite filed (directly merge the content if it is null) {mergeFiled: "PROJECTNAME", premiseFiled: "PROJECTID" },{ mergeFiled: "orststarttime", premiseFiled: "PROJECTID" },{ mergeFiled: "ORGUNIT", premiseFiled: "PROJECTID"}]; var dg =$ ("# datagrid1 "); // table idvar rowCount = dg in the datagrid to be merged. datagrid ("getRows "). length; var cellNa Me; var span; var perValue = ""; var curValue = ""; var perCondition = ""; var curCondition = ""; var flag = true; var condiName = ""; var length = arr. length-1; for (I = length; I> = 0; I --) {cellName = arr [I]. mergeFiled; condiName = arr [I]. premiseFiled; if (isNotNull (condiName) {flag = false;} perValue = ""; perCondition = ""; span = 1; for (row = 0; row <= rowCount; row ++) {if (row = rowCount) {curValue = ""; curCondition = "";} Else {curValue = dg. datagrid ("getRows") [row] [cellName];/* if (cellName = "orststarttime") {// special processing of this time field curValue = formatDate (dg. datagrid ("getRows") [row] [cellName], "") ;}*/if (! Flag) {curCondition = dg. datagrid ("getRows") [row] [condiName] ;}} if (perValue = curValue & (flag | perCondition = curCondition) {span + = 1 ;} else {var index = row-span; dg. datagrid ('mergecells ', {index: index, field: cellName, rowspan: span, colspan: null}); span = 1; perValue = curValue; if (! Flag) {perCondition = curCondition ;}}}}}

Where

Var arr = [{mergeFiled: "SERIALNUM", premiseFiled: "PROJECTID"}, // combine the field array of the column and the corresponding prerequisite filed (if it is null, directly merge the content) {mergeFiled: "PROJECTNAME", premiseFiled: "PROJECTID" },{ mergeFiled: "orgarttime", premiseFiled: "PROJECTID" },{ mergeFiled: "ORGUNIT", premiseFiled: "PROJECTID"}];

 

It is an array (storage object) that defines the columns to be merged. The objects in the array have two attributes, mergeFiled: field name of the merged column, and premiseFiled: the precondition constraint column for merging the front and edge columns means that only when the constraint column is equal can the mergeFiled column be merged. For example, if premiseFiled: "", the column is directly merged by content, directly merging based on the same content or not has a big bug, that is, even if the adjacent rows should not be merged but the same content is merged, therefore, we do not want to make table merging more effective. Therefore, we have added a premiseFiled attribute to constrain merging as a precondition, for example, only projectID fields (or even other fields hidden = "true" to hide this column) are merged.

This

Var dg = $ ("# datagrid1"); // table id in the datagrid to be merged

Is to get the jQuery object of the table so that the data of each row can be obtained later.

This method merges the content of adjacent fields that meet the same constraints. Therefore, you must "arrange" the rows to be merged during the query and query them by sorting or connecting, group.

If you want to merge a date field, it cannot be merged, the date in json format obtained by calling the DataGrid method is different (difficult to be the same). In this case, you need to use the json date format to change to our common format for comparison, for example, the code I noted:

/* If (cellName = "orststarttime") {// special processing of this time field curValue = formatDate (dg. datagrid ("getRows") [row] [cellName], "");} */

For details about formatting json dates, refer to my previous article: json Date Format Conversion

The following figure shows how to dynamically merge row data of a DataGrid:

If there is a checkbox, you want to change the front-side checkbox and merge it. You can set the field attribute of the checkbox column to the value of the merged column, for example, projectId, in this way, the checkbox column is also written to the array in the above JS method, so it can be used most to merge the checkbox!

It's late at night. If you have any questions or suggestions, you can leave a comment.