SNF Rapid Development Platform mvc-table cell Merge component

1. Table cells Merge Component 1.1. Effect Display 1.1.1. page display table merged cells

Figure 4.1

1.1.2. Exporting Excel merged cells

Figure 4.2

1.2. Call Description 1.2.1. Table Merge unit style with instructions

First, there is a table bound in ViewModel, for example, we have a table with a binding object of This.grid

We're going to add a method to the Onloadsuccess event of the table.

Snf.mergecellsbyparentfield ("Grid", "code,name,approvestate");

This method has two parameters, the first parameter is the ID value of the table that needs to merge the cells, and the second parameter is the column that needs to be merged, separated by a comma in English.

If more than one column is included in the second argument, the method is automatically judged, with the first column being the primary, and the second column merging only if the first column is a merge state, and if the values of the first column are not the same, the second column is not merged, even if the values are the same. If there is a third column, the second column is the primary, repeating the above method, and so on.

Figure 4.3

4.3,81-86 line data, 81-84 of the encoding for the MERGETESTCODE01,85-86 line is encoded as MERGETESTCODE02, then 81-84 and 85-86 are merged separately. The names of the 81-83 rows are MergeTestName01, so they are also merged, but the names of the 84-85 rows are the same, their encodings are different, and the passed parameters are encoded (code) before the name, so the name is not allowed to merge as long as the encoding is not duplicated. The same is true for the back of the state, although the status of 83-86 is audited, but not merged.

1.2.2. Export Excel Merge unit style with instructions

Export the default call This.downloadclick and this based on code generated by the code generator. Downloadpagesizeclick event, we need to rewrite these two methods in ViewModel.

05. Download

This.downloadclick = function (VM, event) {

Snf.exporter (Self.grid). Download ($ (event.currenttarget). attr ("suffix"), "code,name,approvestate");

};

This.downloadpagesizeclick = function () {

var pagenumber = $ (". Pagination-num"). Val ();

var pageSize = $ (". Pagination-page-list"). Val ();

Snf.exporter (This.grid). Paging (PageNumber, pageSize). Download ("xls", "code,name,approvestate"); //

};

Self.grid the object defined for the table, in this case Self.grid, the parameter "Code,name,approvestate" is the column that needs to be merged, and the principle is identical to 4.2.2.

1.2.3. Demo sample

Program Path:/demo/demosingletablemerge/demosingletablemerge

You can add a menu view in your program by following this path

1.3. Precautions

If there are multiple paginated table objects that need to be paged out (that is, export the current page), the overridden method needs to be changed slightly

This.downloadpagesizeclick = function () {

var pagenumber = $ (". Pagination-num"). EQ (0). Val ();

var pageSize = $ (". Pagination-page-list"). EQ (0). Val ();

Snf.exporter (This.grid). Paging (PageNumber, pageSize). Download ("xls", "code,name,approvestate"); //

};

As above, you need to add. EQ (0) or. EQ (1) or. EQ (...), integer 0, 1, or other in parentheses, indicating that the paging table is the first number, to start at 0, to prevent pagination markup confusion

SNF Rapid Development Platform mvc-table cell Merge component