How to use grid in front of Web frame Ligerui (i.)

Directory:

I. Overview

Second, grid use steps

Third, use grid to display data

Iv. Source code Download

I. Overview

When developing Web Information management systems, using the web front-end framework can help us quickly build a uniform set of interface effects, and can solve most browser compatibility problems, improve development efficiency. More common are ExtJS,easyui,miniui,JQuery UI,DWZ,Liger UI,QUI and so on, these frameworks have abroad, there are domestic, there are fees, there are open source free, they have their own advantages, but also have their own shortcomings. Here we introduce the usage of some common components in the Liger UI framework.

Ligerui Demo address:http://www.ligerui.com

Ligerui API Address:http://api.ligerui.com/

Second, grid use steps

First, we introduce the most commonly used data display component Grid, using the following steps:

　　1, the correct introduction of the page style files and corresponding components

 <Linkhref= "<%=request.getcontextpath ()%>/ui/lib/ligerui/skins/aqua/css/ligerui-all.css"rel= "stylesheet"type= "Text/css"><Scripttype= "Text/javascript"src= "<%=request.getcontextpath ()%>/ui/lib/jquery/jquery-1.3.2.min.js"></Script><Scripttype= "Text/javascript"src= "<%=request.getcontextpath ()%>/ui/lib/ligerui/js/core/base.js"></Script><Scripttype= "Text/javascript"src= "<%=request.getcontextpath ()%>/ui/lib/ligerui/js/plugins/ligergrid.js"></Script>

　　2. add div to body

<id= "Maingrid"></div>

3.　　 writing js code

<script type= "Text/javascript" >          $ (function() {              $("#maingrid"). Ligergrid ({                  width: $,                  columns:[                      {display:"study number", Name: "Stuno"},                      {display: "Name", Name: "Stuname"},                      {display:"Gender", Name: "Stusex"},                      {display:"age", Name: " Stuage "}                  ]              })       ; </script>

　　After you publish your app, you can see the following effects:

This is just a simple build of the grid, and here's how to use the grid to present the data

Third, use grid to display data

ligergrid display data in JSON object, we only need to assign a background address to the URL property of the grid, by default the grid automatically sends an asynchronous request to the specified program to request data. Note the JSON data format required by the grid by default is as follows:

{Rows:[{},{}],total:2};

We can change the data source properties and data total record properties by specifying the root and record properties of the Ligergrid.

The following code is the key code for the Serlvet that loads the data in the background, such as string data to be used to build the JSON format required by the grid.

Resp.setcontenttype ("Text/html;charset=utf-8");         New Jsonobject ();        List<map<string, string>> list =initstudentdata ();        Obj.put ("Rows", list);        Obj.put ("Total", list.size ());         = Resp.getwriter ();        Out.write (Obj.tostring ());        

　　Modify the JS code as follows:

vargrid=$ ("#maingrid"). Ligergrid ({width:600, columns:[{display:"School Number", Name: "Stuno"}, {display:"Name", Name: "Stuname"}, {display:"Gender", Name: "Stusex"}, {display:"Age", Name: "Stuage"}                  ],                  //value is local, data is paginated on the clientDataaction: "Local",                  //Data Request AddressURL: "Main/studentservlet.action?reqcode=findstudents",                  //Data Book no pagination, default to TrueUsepager:true, PageSize:"8",//Paging Page SizePAGESIZEOPTIONS:[8,16,32]//can specify page size per page});

　　The following results are performed:

Note here, we are in the actual application of the paging method is basically the background paging, that is, paging in the database , here is mainly a demonstration, the direct use of the client paging, by default, the value of dataaction is the server that is, paging the server.

As we can see, the sex column shows the content is code, obviously does not meet the requirements, Ligergrid provides us with the cell renderer, can help us to achieve the effect we want.

　　Continue to modify the grid column properties as follows:

columns:[{display:"School Number", Name: "Stuno"}, {display:"Name", Name: "Stuname"}, {display:"Gender", Name: "Stusex", Render:function(rowdata) {if(rowdata.stusex== "0"){                                  returnMale; }Else{                                  returnFemale; }}}, {display:"Age", Name: "Stuage", Render:function(rowdata) {if(parseint (Rowdata.stuage) <22){                                  return"<span style= ' color:red ' >" +rowdata.stuage+ "</span>"; }                              returnRowdata.stuage; }                                            }                  ] 

　To run the program, the effect is as follows:

By using render We can complete the custom cell.

When the data is large users, we do not want users to open the page immediately display data, so that the server will cause a lot of pressure, but when the user entered the query criteria and click on the query, after the loading data.

　　Modify the JS code as follows to enable loading data according to the input criteria:

  vargrid=$ ("#maingrid"). Ligergrid ({width:600, columns:[{display:"School Number", Name: "Stuno"}, {display:"Name", Name: "Stuname"}, {display:"Gender", Name: "Stusex", Render:function(rowdata) {if(rowdata.stusex== "0"){                                  returnMale; }Else{                                  returnFemale; }}}, {display:"Age", Name: "Stuage", Render:function(rowdata) {if(parseint (Rowdata.stuage) <22){                                  return"<span style= ' color:red ' >" +rowdata.stuage+ "</span>"; }                              returnRowdata.stuage;                            }                                            }                  ]                                }); $("#btnLoad"). Click (function(){                  varname=$ ("#stuname"). Val (); Grid.set ({//value is local, data is paginated on the clientDataaction: "Local",                      //Data Request AddressURL: "Main/studentservlet.action?reqcode=findstudents",                      //Data Book no pagination, default to TrueUsepager:true, PageSize:"8",//Paging Page SizePAGESIZEOPTIONS:[8,16,32],//can specify page size per pageParms:[{name: "Stuname", Value:name}]                  });              Grid.loaddata (); });

The results are as follows:

source download See: Baidu Cloud Code share

How to use grid in front of Web frame Ligerui (i.)