Summary of experience on Bootstrap Metronic development framework "Two" list paging processing and the use of plug-in jstree _javascript techniques

In the last article based on the Bootstrap Metronic development Framework Experience Summary "one" Frame Overview and Menu module processing, introduced the bootstrap development framework of some basic generalizations, including the overall interface effect, as well as layout, menu and other content, this article continues this theme, Describes the page content commonly used in the data paging processing, as well as the use of Bootstrap plug-in jstree.

In the data interface display, tabular data display and paging is a very common processing operations, using the bootstrap style layout, and jquery Ajax data processing, can be very good to achieve dynamic display of data and paging processing.

1, list display and paging processing 1 data list display

In many pages, we generally need to display and page the database records.

The tree on the left is a list of the following section, the right is our General data query display area, divided into query content and data list two parts, query content, we generally put in a form inside processing, users trigger the query, we deal with the event, And from the MVC controller inside the request of the corresponding data returned to the front end of the page, the data display and paging processing can be.

The query code for the menu page looks like the following.

 <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 "> &  Lt;input name= "Whc_name" type= "text" class= "Form-control" > </div> </div> </div> <div class= "col-md-3 col-sm-3 col-xs-6" > <div class= "Form-group" > <label class= "Control-label col-md-4" ; feature id</label> <div class= "col-md-8" > <input name= "Whc_functionid" type= "text" class= "Form-control" > </div> </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> ;d IV class= "Col-md-3 col-sm-3 col-xs-6 "> <div class=" Form-group "> <label class=" Control-label col-md-4 ">web menu icon &LT;/LABEL&G
    T <div class= "Col-md-8" > <input name= "Whc_webicon" type= "text" class= "Form-control" > </div> & Lt;/div> </div> </form>

We are in the page JS code, processing page initialization, the data query processing operations, as shown in the following script.

 Page initialization
 $ (function () {
  initjstree ();////init tree
  bindevent ();//Bind Event Processing
  Search (currentpage);//Initialize the first page of data
  Initdictitem ();//Initialize dictionary information
 });

In the display section of the data, the HTML code looks like this. The main thing is to show the contents of the header, the main content of the table grid_body the script dynamically build and display

<table id= "grid" class= "Table 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" > Operations </th>
    </tr>
   </thead>
   <tbody id= "grid_ Body "></tbody>
   </table>
   <div class=" Paging-toolbar ">
   <ul id= ' grid_paging ' ></ul>
   </div>

And the data display, is after the page prepares to complete, through the search script function processing, processing, the first serial number form condition and the paging condition information, the incoming MVC controller, obtains the corresponding list data, carries on the dynamic binding on the interface to complete the entire processing process. The concrete code screenshot below is shown below.

and where the code

TR = getactionhtml (item.id);

The script generates some action buttons, and the interface looks like this.

2) Data Paging processing

Our page shows the data is generally not a fixed record, so pagination is also very necessary to deal with, can improve performance, but also can improve the user's friendly experience, where the data paging is the use of bootstrap Plug-ins bootstrap paginator processing. This control is used a lot, is a very powerful paging plug-in.

Bootstrap paginator Its GitHub code address is: Https://github.com/lyonlai/bootstrap-paginator

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

When the control is used, the jquery and bootstrap styles and class libraries are introduced, and can be added using the following lines of code.

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

The control paging can be implemented by handling page-clicked and page-changed events.

Pagination display content, we by adding a div in the HTML code, declare an ID grid_paging UL element, the code is shown below.

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

Then the specific JS inside the processing code as shown below.

In the background of MVC, we need to get the paging condition and form data condition that the user passed in the front page, so that we can get the corresponding data to the client according to these parameters.

Because these processes are very common, so we can put to the base class controller for processing, if the need for special processing, and then in the subclass controller to rewrite the paging function Findwithpager can be.

 <summary>
 ///Query the database based on the criteria and return the collection of objects (for paging data display)
 ///</summary>
 ///<returns> The collection of specified objects </returns> public
 virtual ActionResult Findwithpager ()
 {
  //Check whether the user has permission, Otherwise throw the mydenyaccessexception exception
  base. Checkauthorized (Authorizekey.listkey);
  string where = Getpagercondition ();
  Pagerinfo pagerinfo = Getpagerinfo ();
  list<t> list = Basebll.findwithpager (where, pagerinfo);
  JSON format requirements {total:22,rows:{}}
  //Constructed in JSON format pass var result
  = new {total = pagerinfo.recordcount, rows = List};
   return tojsoncontentdate (Result);
 

Where Getpagerinfo is to get the user incoming paging parameters, but also remember our front end page processing URL parameters, as shown below.

url = "/menu/findwithpager?page=" + page + "&rows=" + rows;

The implementation code for the Getpagerinfo function of the specific MVC controller is shown below.

 <summary>
 ///to get the paging object data according to the request parameter
 ///</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;
 }

Then after you get to the form conditions and paging conditions, the business logic class that is passed into the framework is done, and this is already the support category at the bottom of the framework, not continuing.

list<t> list = Basebll.findwithpager (where, pagerinfo);

The final interface effect is shown below

2, Plug-in Jstree

The previous section also enhances the display of the tree list, in general, if the data is hierarchical, then through the tree list display, can be very intuitive display their structure, so the tree list in many cases, can help us to the classification of the data display.

As for the user data, we can classify the user's organization or role, they can be visually displayed through the tree list, so that we are looking for different types of user lists, it is easy to find.

Or, for dictionary data or provincial city data, it can be shown through a tree list.

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

The web site on the use of Jstree control instructions and cases have been explained clearly, in general, we directly refer to the example can be used.

The simple Jstree uses the code as shown below

$ (function () {$ (' #jstree_demo_div '). Jstree ();

For Jstree events, we can generally bind events through the following code.

$ (' #jstree_demo_div '). On ("Changed.jstree", function (E, data) {
 console.log (data.selected);
});

Jstree in general we will dynamically bind through JSON data, and this JSON data format definition looks like this.

{
 id  : ' string '//Required
 Parent: ' string '//Required
 text: ' String '//Node text
 icon: ' String ' String for custom state
 : {
 Opened:boolean//are the node open
 Disabled:boolean/is the node disable D
 Selected:boolean//are 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 for data emptying and binding operations

$ (' #jstree_demo_div '). Data (' Jstree ', false);//Clear the
binding $.getjson of the JSON data
(URL, function (data) {
 $ (' #jstree_demo_div '). Jstree ({'
 core ': {
  ' data ': Data,
  "Themes": {
  "responsive": false
  }
 }
 }). Bind (' Loaded.jstree ', loadedfunction);

If we need to give the user a check box to set the Jstree, the interface effect looks like this.

Then the general initialization function needs to change, as shown in the following code

 Initialization code for Jstree with check boxes
 $.getjson (URL, function (data) {
  control.jstree ({
  ' plugins ': [checkbox],//Appearance selection box c4/> ' checkbox ': {cascade: ', three_state:false},//Not cascaded
  ' core ': {
   ' data ': data,
   ' themes ': {
   ' Responsive ": false}}}"
  . bind (' Loaded.jstree ', loadedfunction);
 });

Combining the two, we can further refine the initialization binding of the Jstree control into a JS public function Bindjstree.

Initializes the Jstree control//treename to the tree div name with the specified JSON data,
URL to the data source address, checkbox to show check boxes, and loadedfunction to the loaded callback function
function Bindjstree (treename, url, checkbox, loadedfunction) {
 var control = $ (' # ' + treename)
 control.data (' Jstree ', false);//empty data, must be
 var ischeck = arguments[2] | | false;//Set checkbox defaults to False
 if (ischeck) {
 // Initialization $.getjson of the checkbox tree
 (URL, function (data) {
  control.jstree ({
  ' plugins ': [' checkbox '],//Appearance selection box)
  CheckBox ': {cascade: ', three_state:false},//Not cascaded
  ' core ': {
   ' data ': data,
   ' themes ': {
   ' Responsive ": false}}}"
  . bind (' Loaded.jstree ', loadedfunction);
 });
 else {
 //normal tree list initialization
 $.getjson (URL, function (data) {
  control.jstree ({'
  core ': {'
   data ': Data ,
   "Themes": {
   "responsive": false}}
  ). Bind (' Loaded.jstree ', loadedfunction);
 });
}

So when the page is bound Jstree, the code can simplify

 Initialize organization list
 function Initdepttreeview () {
  var treeurl = '/user/getmydeptjstreejson?userid= @Session [' UserId ' ]';
  Bindjstree ("Jstree_div", Treeurl);
  Change event handling for tree controls
  $ (' #jstree_div '). On ("Changed.jstree", function (E, data) {
  var icon = Data.node.icon;  
  Loaddatabyou (data.selected);}
 

For a list of check boxes, the initialization code looks like this.

 Initializes all of the user's feature sets
  var treeurl = '/function/getrolefunctionjstreebyuser?userid= @Session [' userId '] ';
  Bindjstree ("Tree_function", Treeurl, true);
  Role data permissions, first initialize all departments
  treeurl = '/user/getmydeptjstreejson?userid= @Session [' userId '] ';
  Bindjstree ("Tree_roledata", Treeurl, True);

For a check box, we typically initialize the data, and then set the selected state of the tree list as needed, which can effectively improve performance and response experience without frequent initialization of the tree.

So after we initialize the tree list, we need to clear the selection and then set the options we need, as shown in the code below, and note the handling of the Uncheck_all and Check_node events.

Initialize role data permission set (organization)
 function Initroledata (ID) {
  if (id!= "") {
  var treemenu = "Tree_roledata";
  $ (' # ' + treemenu). Jstree ("Uncheck_all");//Uncheck All selected
  //tick-specific content
  $.getjson ("/roledata/getroledatalist?r=" + Math.random () + "&roleid=" + ID, function (JSON) {
   $.each (JSON, function (I, item) {
    $ (' # ' + treemenu). Jstree ( ' Check_node ', item);//select Node});}
 

When the data is saved, we get the Jstree node to select the list of data can be saved, the specific code as shown below.

Save Role Data Permissions
 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 feature, please contact your administrator for processing.") ");
  });
 }

Well, introduced here, basically also the regular data display, data paging, jstree binding, event processing, data preservation and other operations introduced relatively complete, I hope to get everyone's continued support, I will continue to introduce bootstrap development of the main points and the use of various plug-ins, In order to learn more specific, practical, can give us a real-value development project to do useful reference.

The above content is small make up to you introduced based on Bootstrap Metronic development Framework Experience Summary of "two" List page processing and plug-in jstree use of relevant knowledge, hope to help everyone. In this also thank you for the cloud Habitat Community website support, I believe we will do better!