Summary of Development Framework experience based on BootStrap Metronic [2] use of list paging and plug-in JSTree, metronicjstree

Summary of Development Framework experience based on BootStrap Metronic [2] use of list paging and plug-in JSTree, metronicjstree

In the previous article, based on the BootStrap Metronic Development Framework experience summary [1] framework overview and menu module processing, I introduced some basic summaries of the Bootstrap development framework, including the overall interface effect, as well as layout, menu and other content, this article continues this topic, describes the commonly used page content data paging processing, and the use of the Bootstrap plug-in JSTree.

In the data interface display, table data display and paging are very common processing operations. Using Bootstrap's style layout and JQuery's Ajax data processing, data can be dynamically displayed and processed by page.

1. List display and paging processing 1) list display of data

In many pages, we usually need to list and display database records by page.

The tree list on the left is described in the following section. The right is the display area of our general data query, which is divided into two parts: the query content and the data list. The query content is usually processed in a form, when a user triggers a query, we process the event and request the corresponding data from the Controller of the MVC background to the front-end of the page to display the data and process it by page.

The query code on the menu page is as follows.

<Form class = "form-horizontal" id = "ffSearch"> <div class = "col-md-3 col-sm-3 col-xs-6"> <div class = "form-group"> <label class =" control-label col-md-4 "> display name </label> <div class =" col-md-8 "> <input name =" WHC_Name "type =" text "class =" form-control "> </div> <div class = "col-md-3 col-sm-3 col-xs-6"> <div class = "form-group"> <label class = "control-label col-md-4> function ID </label> <div class = "col-md-8"> <input name = "WHC_FunctionId" type = "text" class = "form-control"> </div> </div> <div class = "col-md-3 col-sm-3 col-xs-6"> <div class = "form-group"> <label class = "control-label col-md-4"> web connection address </label> <div class = "col-md-8"> <input name = "WHC_Url" type = "text" class = "form-control"> </div> </div> <div class = "col-md-3 col-sm-3 col-xs-6"> <div class = "form-group"> <label class = "control-label col-md-4"> Web menu icon </label> <div class = "col-md-8"> <input name = "WHC_WebIcon" type = "text" class = "form-control"> </div> </div> </form>

In the JS Code of the page, after the page is initialized, We can query the data, as shown in the following script.

// Page initialization $ (function () {initJsTree (); // initialization tree BindEvent (); // bind event processing Search (currentPage ); // initialize the first page of Data InitDictItem (); // initialize dictionary information });

The HTML code for displaying data is as follows. The content of the table header is displayed, while the body content of the table is grid_body, Which is dynamically built and displayed by scripts.

<Table id = "grid" class = "table-striped table-bordered table-hover" cellpadding = "0" cellspacing = "0" border = "0" class = "display "width =" 100% "> <thead id =" grid_head "> <tr> <th class =" table-checkbox "style =" width: 40px "> <input class =" group-checkable "type =" checkbox "onclick =" selectAll (this) "> </th> <th> display name </th> <th> sort </th> <th> function ID </th> <th> menu visible </th>> <th> Web connection address </th> <th> Web menu icon </th> <th> system number </th> <th style = "width: 90px "> operation </th> </tr> </thead> <tbody id =" grid_body "> </tbody> </table> <div class =" paging-toolbar "> <ul id = 'grid _ paging '> </ul> </div>

The data display is processed by using the Search script function after the page preparation is complete. during processing, the serial number Form Conditions and paging condition information are first transmitted to the MVC controller, obtain the corresponding list data and dynamically bind it to complete the entire process. The Code is as follows.

The Code

tr += getActionHtml(item.ID);

Some operation buttons are generated through the script, as shown in the following figure.

2) Data Paging

The data displayed on our page is generally not a fixed record, so paging is also necessary to improve performance and user friendly experience, the data pagination adopts the Bootstrap plug-in Bootstrap Paginator for processing. This control is widely used and is a powerful paging plug-in.

Bootstrap Paginator It's GitHub Code address: https://github.com/lyonlai/bootstrap-paginator

Its use example introduction, can refer to: http://lyonlai.github.io/bootstrap-paginator/

When using this control, you can add and use Jquery and Bootstrap styles and class libraries through the following code lines.

<script src="/js/bootstrap-paginator.min.js"></script>

The control page can be implemented by processing the page-clicked and page-changed events.

The content is displayed by page. We add a DIV in the HTML code to declare a UL element whose ID is grid_paging. The Code is as follows.

 <div class="paging-toolbar">  <ul id='grid_paging'></ul> </div>

Then the specific JS processing code is as follows.

In the MVC background, we need to obtain the paging conditions and form data conditions that users pass in on the front-end page. In this way, we can obtain the corresponding data and return it to the client based on these parameters.

Because these processes are very common, we can put them into the base class controller for processing. If you need special processing, rewrite the paging function FindWithPager In the subclass controller.

/// <Summary> /// query the database based on the condition and return the object set (for paging data display) /// </summary> /// <returns> specifies the object set </returns> public virtual ActionResult FindWithPager () {// check whether the user has the permission, otherwise, the base will throw the MyDenyAccessException exception. checkAuthorized (AuthorizeKey. listKey); string where = GetPagerCondition (); PagerInfo pagerInfo = GetPagerInfo (); List <T> list = baseBLL. findWithPager (where, pagerInfo); // Json format requirements {total: 22, rows: {}} // construct a Json format to pass var result = new {total = pagerInfo. recordCount, rows = list}; return ToJsonContentDate (result );}

GetPagerInfo is used to obtain the page parameters passed in by the user. Do you still remember the URL parameters processed on the front-end page as follows.

url = "/Menu/FindWithPager?page=" + page + "&rows=" + rows;

The implementation code of the GetPagerInfo function of the MVC controller is as follows.

/// <Summary> /// obtain paging object data based on the Request Parameters /// </summary> /// <returns> </returns> protected virtual PagerInfo GetPagerInfo () {int pageIndex = Request ["page"] = null? 1: int. Parse (Request ["page"]); int pageSize = Request ["rows"] = null? 10: int. Parse (Request ["rows"]); PagerInfo pagerInfo = new PagerInfo (); pagerInfo. CurrenetPageIndex = pageIndex; pagerInfo. PageSize = pageSize; return pagerInfo ;}

After the Form Conditions and paging conditions are obtained, the business logic class that is passed into the framework can be processed. This is already the underlying support scope of the framework and will not be expanded.

List<T> list = baseBLL.FindWithPager(where, pagerInfo);

The final interface effect is as follows:

2. Plug-In JSTree

The tree list is also improved in the previous section. In general, if the data has layers, the tree list display can intuitively display their structures, therefore, in many cases, the tree list can help us to display data categories.

For user data, we can classify user data based on the organization or role of the user. The two can be intuitively displayed through the tree list, in this way, we can find different types of user lists.

You can also use the tree list to display Dictionary data or province-city data.

The official address of the JSTree control is https://www.jstree.com/

The instructions on JSTree controls and the case are clearly explained on the website. Generally, we can use the JSTree control directly by referring to the example.

The simple JSTree code is as follows:

$(function () { $('#jstree_demo_div').jstree(); });

For JSTree events, we can use the following code to bind events.

$('#jstree_demo_div').on("changed.jstree", function (e, data) { console.log(data.selected);});

JSTree is usually dynamically bound through JSON data. The JSON data format is defined as follows.

{ id  : "string" // required parent : "string" // required text : "string" // node text icon : "string" // string for custom state : { opened : boolean // is the node open disabled : boolean // is the node disabled selected : boolean // is the node selected }, li_attr : {} // attributes for the generated LI node a_attr : {} // attributes for the generated A node}

In general, we use the following script to clear and bind data.

$ ('# Jstree_demo_div '). data ('jstree', false); // clear data. JSON data must be bound asynchronously $. getJSON (url, function (data) {$ ('# jstree_demo_div '). jstree ({'core': {'data': data, "themes": {"responsive": false }}}). bind ('loaded. jstree ', loadedfunction );});

If you need to provide the check box and set the JSTree selected status, the interface effect is as follows.

The general initialization function needs to be changed, as shown in the following code:

// JSTree initialization code with check boxes $. getJSON (url, function (data) {control. jstree ({'ins ins': ["checkbox"], // The selection box 'checkbox': {cascade: "", three_state: false} appears }, // cascade 'core': {'data': data, "themes": {"responsive": false }}}). bind ('loaded. jstree ', loadedfunction );});

Combining the two, we can further combine the initialization binding of the JSTree control into a JS public function bindJsTree.

// Initialize the JStree control with the specified Json data // The treeName is the name of the tree div, the url is the data source address, and the checkbox is the check box for displaying or not, loadedfunction is the loaded callback function bindJsTree (treeName, url, checkbox, loadedfunction) {var control = $ ('#' + treeName) control. data ('jstree', false); // clear data. var isCheck = arguments [2] | false; // set the default value of checkbox to false if (isCheck) {// check box tree initialization $. getJSON (url, function (data) {control. jstree ({'ins ins': ["checkbox"], // The selection box 'checkbox': {cascade: "", three_state: false} appears }, // cascade 'core': {'data': data, "themes": {"responsive": false }}}). bind ('loaded. jstree ', loadedfunction);} else {// initialization of the common tree list $. getJSON (url, function (data) {control. jstree ({'core': {'data': data, "themes": {"responsive": false }}}). bind ('loaded. jstree ', loadedfunction );});}}

Therefore, when binding JSTree to a page, the code can be simplified.

// Initialize the organization list function initDeptTreeview () {var treeUrl = '/User/GetMyDeptJsTreeJson? UserId = @ Session ["UserId"] '; bindJsTree ("jstree_div", treeUrl); // handle the change event of the tree control $ (' # jstree_div '). on ("changed. jstree ", function (e, data) {var icon = data. node. icon; loadDataByOu (data. selected );});}

For the list of check boxes, the initialization code is as follows.

// Initialize all functions of this user. var treeUrl = '/Function/GetRoleFunctionJsTreeByUser? UserId = @ Session ["UserId"] '; bindJsTree ("tree_function", treeUrl, true); // role data permission, Initialize all departments treeUrl ='/User/GetMyDeptJsTreeJson first? UserId = @ Session ["UserId"] '; bindJsTree ("tree_roledata", treeUrl, true );

For check boxes, we usually initialize the data and set the selected status of the tree list as needed. This kind of tree does not need to be initialized frequently, which can effectively improve the performance and response experience.

After the initialization tree list, we need to clear the selection items and set the required selection items. The specific code is as follows. Pay attention to the uncheck_all and check_node event processing.

// Initialize the role data permission set (organization) function initRoleData (id) {if (id! = "") {Var treeMenu = "tree_roledata"; $ ('#' + treeMenu ). jstree ("uncheck_all"); // cancel all selected // select the specified content $. getJSON ("/RoleData/GetRoleDataList? R = "+ Math. random () + "& roleId =" + id, function (json) {$. each (json, function (I, item) {$ ('#' + treeMenu ). jstree ('check _ node', item); // select a node });});}}

When saving the data, we can obtain the JSTree Node Selected list to save the data. The specific code is as follows.

// Function saveRoleData (roleid) {var ouList =$ ('# tree_roledata '). jstree ('get _ selected'); var url = '/RoleData/UpdateData? R = '+ Math. random (); var postData = {roleId: roleid, ouList: ouList. join (',')}; $. post (url, postData, function (json) {initRoleData (roleid );}). error (function () {showTips ("You are not authorized to use this function. Contact the administrator. ");});}

Now, we will introduce general data presentation, data paging, JSTree binding, event processing, data storage, and other operations, I hope everyone will continue to provide support. I will continue to introduce in detail the main points involved in Bootstrap development and the use of various plug-ins, so that learning can be more specific and practical, it can provide a useful reference for our real-price development projects.

The above content is a summary of the BootStrap Metronic Development Framework experience [2] list paging processing and the use of the plug-in JSTree, I hope to help you. We would also like to thank you for your support for the help House website. I believe we will do better!