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

一,准备工作

使用开发工具:Microsoft Visual Studio 2010

使用插件版本: jQuery 1.4.1  、 jQuery LigerUI 1.1.7

二,创建MVC项目

 

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

三,下载最新版的ligerui,并拷贝到web的根目录

下载地址:http://ligerui.googlecode.com/

 

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

 

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

 

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

一,增加视图

 

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

二,增加Action

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

 

三,引入jQuery库和ligerui的引用

 

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

 

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

 

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

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

一,编写JS代码调用ligerGrid

 

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

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

 

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

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

 

三,效果

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

如何分页和排序。

一,ligerGrid服务器端分页的原理

可以利用firebug来调试,可以查看到grid加载分页数据的时候,会往服务器传几个数据:

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

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

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

二,如何使用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 }


三,前台调用

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

四,效果

 

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

源码下载

下载地址:GridMvcApp.7z

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-05-06
  • 2022-12-23
  • 2021-08-15
  • 2022-12-23
猜你喜欢
  • 2021-06-01
  • 2021-08-15
  • 2021-06-07
  • 2021-06-09
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案