jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据-it论坛

安哥网络

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据-it论坛
准备工作。创建MVC项目，拷贝LIGERUI库到Web程序中。一，准备工作使用开发工具：Microsoft Visual Studio 2010
使用插件版本： jQuery 1.4.1  、 jQuery LigerUI 1.1.7
二，创建MVC项目

三，下载最新版的ligerui，并拷贝到web的根目录下载地址：http://ligerui.googlecode.com/






增加视图和Action，引入jQuery库和ligerUI库的引用，模板页中增加视图的链接一，增加视图


二，增加Action

三，引入jQuery库和ligerui的引用


四：模板页增加视图的链接


准备数据结构(ligerGrid的调用) 和数据源(增加一个Action,返回JSON格式)一，编写JS代码调用ligerGrid

这里要注意一下URL的格式 ： /Home/GetData

二，准备数据源(增加一个Action，返回JSON格式)

三，效果

如何分页和排序。一，ligerGrid服务器端分页的原理可以利用firebug来调试，可以查看到grid加载分页数据的时候，会往服务器传几个数据：

那么在后台我们需要根据这几个参数返回grid适合的数据：

二，如何使用MVC Action接收并返回数据：

1. public ActionResult GetData2()
   
2.         {
   
3.             //排序的字段名
   
4.             string sortname = Request.Params["sortname"];
   
5.             //排序的方向
   
6.             string sortorder = Request.Params["sortorder"];
   
7.             //当前页
   
8.             int page = Convert.ToInt32(Request.Params["page"]);
   
9.             //每页显示的记录数
   
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 = "部门" + i,
    
20.                     time = DateTime.Now
    
21.                 });
    
22.             }
    
23.             //这里模拟排序操作
    
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.             //这里模拟分页操作
    
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.         }

复制代码

三，前台调用
四，效果


源码下载下载地址：GridMvcApp.7z
分类: 02.LigerUI
摘自：http://www.cnblogs.com/leoxie2011/archive/2012/03/06/2381720.html