jQueryLigerUI表格LigerGrid结合ASP.NETMVC显示数据

阅读目录

• 准备工作。创建MVC项目，拷贝LIGERUI库到Web程序中。


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


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


• 如何分页和排序


• 源码下载

准备工作。创建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 list = new List();
13 var total = 1000;
14 for (var i = 0; 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 targetList = new List();
30 //这里模拟分页操作
31 for (var i = 0; i 32 {
33 if (i >= (page - 1) * pagesize && i 34 {
35 targetList.Add(list[i]);
36 }
37 }
38 var griddata = new { Rows = targetList, Total = total };
39 return Json(griddata);
40 }

三，前台调用

四，效果

源码下载

下载地址：GridMvcApp.7z