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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM