easy ui datagrid 資料分頁

浪花一朵朵發表於2013-06-17
UI

參照easyui官方網站提供的demo寫了個datagrid資料分頁的demo,

具體引數我就不一一羅列了，詳細見官方網站,

這裡只介紹一下具體的注意事項和常乃用到的幾項，

 1  $('#test').datagrid({
 2                 iconCls: 'icon-save',
 3                 nowrap: false,
 4                 striped: true,
 5                 url: 'UserHandler.ashx?action=List',
 6                 title: 'DataGird',
 7                 loadMsg: "正在載入，請稍等...",
 8                 width: 350,
 9                 height: 300,
10                 singleSelect: true,
11                 columns: [[
12                     { field: 'UserName', title: '編號', width: 80 },
13                     { field: 'Password', title: '姓名', width: 100 },
14                 ]],
15                
16                 pagination: true,
17                 rownumbers: true
18             });

具體的列，在程式碼中11到14行，其中UserName和Password對應json字串中的鍵，
注意：這裡“pagination:true”必須顯式加上，預設為false，

再來看伺服器端：

 1  int pageSize = 10;//通過這個獲取得到pageSize
 2             int pageNum = 0;//通過這個獲取得到pageNum
 3 
 4             if (Request["page"] != null)
 5             {
 6                 int.TryParse(Request["page"], out pageNum);
 7             }
 8 
 9             if (Request["rows"] != null)
10             {
11                 int.TryParse(Request["rows"], out pageSize);
12             }
13 
14             string resultStr = "";
15            
16             resultStr += "{\"total\":" + lsFileType.Count + ",\"rows\":[";
17             for (int i = (pageNum - 1) * pageSize; i < pageSize; i++)
18             {
19                 resultStr += "{";
20                 resultStr += string.Format("\"UserName\": \"{0}\", \"Password\": \"{1}\"", lsFileType[i].UserName, lsFileType[i].Password);
21                 resultStr += "},";
22             }
23             resultStr = resultStr.Substring(0, resultStr.Length - 1);
24             resultStr += "]}";

需要注意的是：total和rows需要加上引號，開始我寫成這樣，
resultStr += "{total:" + lsFileType.Count + ",rows:[";

一直不顯示資料。

demo下載

 

 

相關文章