Jquery ligerui table ligergrid combines ASP. net mvc to display data

ArticleDirectory

• I. Preparations
• 2. Create an MVC Project
• 3. download the latest ligerui and copy it to the Web root directory.
• 1. Add a view
• 2. Add action
• 3. Introduce jquery library and ligerui references
• 4. Add a view link to the template page.
• 1. Compile JS Code to call ligergrid
• 2. Prepare the data source (add an action and return the JSON format)
• 3. Effect
• I. Principle of pagination on the ligergrid Server
• 2. How to Use MVC action to receive and return data:
• 3. frontend call
• Iv. Effect

Reading directory

• Preparation. Create an MVC project and copy the ligerui Library to the web program.
• Add views and actions, introduce references to the jquery library and ligerui library, and add view links to the template page.
• Prepare the data structure (called by ligergrid) and Data Source (add an action and return the JSON format)
• Paging and sorting
• Source code download

Preparation. Create an MVC project and copy the ligerui Library to the Web Program . I. Preparations

Use the development tool: Microsoft Visual Studio 2010

Plug-in versions: jquery 1.4.1 and jquery ligerui 1.1.7

2. Create an MVC Project

 

3. download the latest ligerui and copy it to the Web root directory.

: Http://ligerui.googlecode.com/

 

 

 

Add views and actions, introduce references to jquery and ligerui libraries, and add view link 1 to the template page.

 

2. Add action

 

3. Introduce jquery library and ligerui references

 

 

4. Add a view link to the template page.

 

Prepare the data structure (called by ligergrid) and Data Source (add an action and return the JSON format ). Code Call ligergrid

 

Note the URL format:/home/getdata

 

2. Prepare the data source (add an action and return the JSON format)

 

3. Effect

How to paging and sort. I. Principle of pagination on the ligergrid Server

You can use firebug for debugging. You can see that when the grid loads paging data, several pieces of data will be transferred to the server:

In the background, we need to return suitable grid data based on these parameters:

2. How to Use MVC action to receive and return data:

 1      Public Actionresult getdata2 ()
 2 {
 3               //  Name of the sorted Field  
  4               String Sortname = request. Params [ "  Sortname  " ];
 5               //  Sorting direction  
  6               String Sortorder = request. Params [ "  Sortorder  " ];
 7               //  Current page 
  8               Int Page = convert. toint32 (request. Params [ "  Page  " ]);
 9               //  Number of records displayed per page  
  10               Int Pagesize = convert. toint32 (request. Params [ "  Pagesize  " ]);
11  
 12 Ilist <node> List = New List <node> ();
 13               VaR Total = 1000 ;
 14               For ( VaR I = 0 ; I <total; I ++)
 15 {
 16 List. Add ( New Node ()
 17 {
 18 Id = I,
 19 Name = "  Department  " + I,
 20 Time = datetime. Now
 21 });
 22 }
23               //  Here, the sorting operation is simulated.  
  24               If (Sortorder = "  Desc  " )
 25 List = List. orderbydescending (C => C. ID). tolist ();
 26               Else 
 27 List = List. orderby (C => C. ID). tolist ();
28  
 29 Ilist <node> targetlist = New List <node> ();
 30               //  Here, the paging operation is simulated.  
  31               For ( VaR I = 0 ; I <total; I ++)
 32 {
 33                  If (I> = (page- 1 ) * Pagesize & I <page * pagesize)
 34 {
 35 Targetlist. Add (list [I]);
 36 }
 37 }
 38               VaR Griddata = New {Rows = targetlist, total = total };
 39              Return JSON (griddata );
 40 }

3. frontend call

Iv. Effect

 

Source code download

: Gridmvcapp.7z