[转载]jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

[转载]jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据 – 谢略 – 博客园.

准备工作。创建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

增加Action

 

三,引入jQuery库和ligerui的引用

 

引入jQuery库和ligerui的引用

 

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

 

模板页增加视图的链接

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

一,编写JS代码调用ligerGrid

 

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

 

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

准备数据源(增加一个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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏