Mikel
[转载]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
三，引入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
