jQuery LigerUI 表格LigerGrid 結合 ASP.NET MVC 顯示資料

文章目錄

• 一，準備工作
• 二，建立MVC項目
• 三，下載最新版的ligerui，並拷貝到web的根目錄
• 一，增加視圖
• 二，增加Action
• 三，引入jQuery庫和ligerui的引用
• 四：模板頁增加視圖的連結
• 一，編寫JS代碼調用ligerGrid
• 二，準備資料來源(增加一個Action，返回JSON格式)
• 三，效果
• 一，ligerGrid伺服器端分頁的原理
• 二，如何使用MVC Action接收並返回資料：
• 三，前台調用
• 四，效果

閱讀目錄

• 準備工作。建立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<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