Metronic-based Bootstrap development Framework Experience Summary (18)--integration of pagination and sequencing support for bootstrap-table plugins in the Code generation tool Database2sharp

In our development system interface, including the web and WinForm are the same, the main interface is the list of main interface, edit the viewing interface, as well as some auxiliary such as import interface, select interface, etc., where the list of the main interface is a comprehensive data display interface, often need to make a reasonable page of records, Integration of various additions and deletions to change the button and other functions. As the development project needs to justify, the data record paging, sorting and other functions are the normal requirements, so in the code generation tool to adjust the main list interface list display plug-in is the bootstrap-table plug-in, This essay focuses on the integration of pagination and sequencing support functions for the bootstrap-table plugin in the Code generation tool DATABASE2SHARP.

1, Web interface list Paging processing 1) General Page paging method

The first Web interface list page, using a more general bootstrap Paginator paging mode, content generation in HTML composition, first set the header, and then get the paging list data, traverse the generation of related HTML data, added to the page, this is a more efficient way to handle , as I began in this series of essays, "Metronic-based Bootstrap development Framework Experience Summary (2)--list page processing and the use of plug-in Jstree" in the introduction of the same. Sometimes for fast query of business data, a tree list is placed on the left to facilitate query classification, the interface is as follows.

The control is very good, and the HTML code can be fully controlled, it is very suitable for the custom interface to show some of the data, such as the icon I have described before the page display interface, is completely customized content display, the icon interface is shown below.

2) bootstrap-table plug-in pagination

The use of regular paging interface controllability is very convenient, but with a number of special requirements of different projects, the need for table header ordering is very strong, the above page processing method can not achieve the table header sorting function, so the introduction of the use of a very wide range of bootstrap-table plug-in, the plug-in application is very broad, The features are very powerful and can be configured with granular functionality to allow for detailed functional control. The Bootstrap-table plugin provides a very rich set of properties for querying, paging, sorting, check boxes, setting display columns, Card view, master and slave table display, merge columns, internationalization processing, and the plug-in also provides some nice extensions, such as moving rows , mobile column location, and other special functions.

So I use this plug-in research and summary, the use of this plugin can refer to my essay "Metronic-based Bootstrap development Framework Experience Summary (16)--using plug-in bootstrap-table to achieve table records query, pagination, sorting and other processing "To understand. This plugin interface is also very beautiful to display.

2. Integration of pagination and sequencing support for bootstrap-table plugins in the Code generation tool Database2sharp

Our Code generation tool Database2sharp is for the framework development services, whether it is WinForm or web development, can be based on the basis of a database framework code for the rapid generation, as well as the interface code generation, the adjustment of the Code generation tool function, In the list interface code added support for bootstrap-table plug-in paging, so that we develop Bootstrap framework interface code richer and faster.

On the Code generation tool Database2sharp, we first use Enterprise Library code increments to generate the skeleton code for the principal framework.

Then in the use of Bootstrap Web interface code generation function, the following can be selected in the toolbar interface.

After selecting the database and the table, the interface code (including the controller code, the View interface code) can be divided into two parts, one is the bootstrap-table plug-in paging and sorting (index.cshtml), the other is the general bootstrap Paginator page Processing (index2.cshtml).

Old customers can continue to use the index2.cshtml style, or use the latest bootstrap-table plug-in pagination and sorting method (index.cshtml).

The generated interface is divided into HTML and JS parts, are more closely related to the two parts, we make certain adjustments can be achieved rich interface layout.

Part of the JS code (show pagination partial processing) is shown below.

The display column of the list data is generated by default in the field of the database, we can make some adjustments after the generation, we can reasonably display the data we are concerned about.

Of course, the generated interface code there are many other JS code, such as editing, viewing the Code and control corresponding, import, export and other code processing, are generated together, we need to make a certain crop adjustment can complete the entire interface processing, greatly improve the development efficiency.

Metronic-based Bootstrap development Framework Experience Summary (18)--integration of pagination and sequencing support for bootstrap-table plugins in the Code generation tool Database2sharp