EasyUI dbgrid 筆記(3) 分頁方式 抓資料方式 post vs Url
因資料一多筆 EasyUI 就好慢 還會卡死 只好分頁
資料是說 加一行設定
pagination: true,
果然分頁欄就跑出來
sql 指令也有分頁
select * from db order by 欄位(這一定要) Offset 0 Rows Fetch Next 10 Rows ONLY
SQLite
select * from U_Data Account Limit 10 Offset 0
但問題來了
1.資料框變得無法自動調整高度? 這直接給個高度就好 自適應問題再說
2.底下右邊的顯示總筆數是怎麼填進去的? 跑不出來
查了很久 大部分是不清不楚的 也許是我還搞不清楚
最後看到2篇
但是他們是用一開始 指定 Url
我不是這樣用的
再看到
easyui datagrid分頁要求數據採用的格式 :{total:2,row:},
在asp.net mvc 中伺服器端只要返回這符合這樣格式的json數據就好。
Mrkt桑是用 JObject 合起來傳出去的 但是不幸 JObject 不知是哪來的 我也懶得找
浪花桑是用 return new { total = Pinfo.T_count, rows = AgdList }; 方式
後來我是用
public class Ag_Json
{
public int total;
public List<Ag_data> rows;
}
包起來
然後丟回去
return Json(Ag_Get_Ag_Json_List(Page), JsonRequestBehavior.AllowGet);
這時前面沒有動作
原來是
$.post("/AgManager/A_Ag_list", {})
.done(function (Rdata) {
$('#Ag_list').datagrid('loadData', { 'rows': Rdata });
$('#Ag_list').datagrid('loadData', { 'total': Rdata.total, 'rows': Rdata.rows });
});
要改這樣才行
終於看到 總筆數了
****************************************************************
如果像我用另外用 post方式 手動去抓資料,分頁功能是不會有動作
要用
var p = $('#Ag_list').datagrid('getPager');
//扑捉分页的触发事件
$(p).pagination({
//pageList: [5, 10, 15, 20, 30, 40, 50],//可以设置每页记录条数的列表
//total:Page_Info.T_count
/*
pageSize: 10,//每页显示的记录条数,默认为10
pageList: [5, 10, 15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
*/
onBeforeRefresh: function () {
$(this).pagination('loading');
alert('before refresh');
$(this).pagination('loaded');
},
onRefresh: function (pageNumber, pageSize) {
alert(pageNumber);
alert(pageSize);
},
onChangePageSize: function () {
alert('pagesize changed');
},
onSelectPage: function (pageNumber, pageSize) {
alert(pageNumber);
alert(pageSize);
}
});
捕抓到再自己用 Post 處理 這時靈活但又變得很麻煩
所以直接試 URL 方式抓資料
*************************************************************************
public ActionResult A_Ag_list(int Page=1, int rows = 10)//參數是 easyUI 會送來的
{
AgLib MyAg = new AgLib();
return Json(MyAg._Ag_Get_Ag_Json_List(Page,rows), JsonRequestBehavior.AllowGet);
}
_Ag_Get_Ag_Json_List 裏頭就是根據 Page,rows SQL取資料回傳 json
-----------------------------------------------------------------------------------------------
前台寫法:
$('#Ag_list').datagrid({
url:"A_Ag_list",
...................
這時不能用 $(p).pagination 去捕抓事件 反正就是啥事都不用幹
只要確保 A_Ag_list傳回 Json {total , rows} 其他不用管
這時不但 分頁功能動作 處理中還會 跑出 "資料處理中"
真是強大的工具
基本都幫你處理好了,真的不要想太多
資料是說 加一行設定
pagination: true,
果然分頁欄就跑出來
sql 指令也有分頁
select * from db order by 欄位(這一定要) Offset 0 Rows Fetch Next 10 Rows ONLY
SQLite
select * from U_Data Account Limit 10 Offset 0
但問題來了
1.資料框變得無法自動調整高度? 這直接給個高度就好 自適應問題再說
2.底下右邊的顯示總筆數是怎麼填進去的? 跑不出來
查了很久 大部分是不清不楚的 也許是我還搞不清楚
最後看到2篇
ASP.NET MVC 使用 jQuery EasyUI DataGrid 分頁功能
asp.net mvc easyui datagrid分頁但是他們是用一開始 指定 Url
我不是這樣用的
再看到
easyui datagrid分頁要求數據採用的格式 :{total:2,row:},
在asp.net mvc 中伺服器端只要返回這符合這樣格式的json數據就好。
這段話 研究過之後
反正就是將 total 加進去Mrkt桑是用 JObject 合起來傳出去的 但是不幸 JObject 不知是哪來的 我也懶得找
浪花桑是用 return new { total = Pinfo.T_count, rows = AgdList }; 方式
後來我是用
public class Ag_Json
{
public int total;
public List<Ag_data> rows;
}
包起來
然後丟回去
return Json(Ag_Get_Ag_Json_List(Page), JsonRequestBehavior.AllowGet);
這時前面沒有動作
原來是
$.post("/AgManager/A_Ag_list", {})
.done(function (Rdata) {
$('#Ag_list').datagrid('loadData', { 'total': Rdata.total, 'rows': Rdata.rows });
});
要改這樣才行
終於看到 總筆數了
****************************************************************
如果像我用另外用 post方式 手動去抓資料,分頁功能是不會有動作
要用
var p = $('#Ag_list').datagrid('getPager');
//扑捉分页的触发事件
$(p).pagination({
//pageList: [5, 10, 15, 20, 30, 40, 50],//可以设置每页记录条数的列表
//total:Page_Info.T_count
/*
pageSize: 10,//每页显示的记录条数,默认为10
pageList: [5, 10, 15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
*/
onBeforeRefresh: function () {
$(this).pagination('loading');
alert('before refresh');
$(this).pagination('loaded');
},
onRefresh: function (pageNumber, pageSize) {
alert(pageNumber);
alert(pageSize);
},
onChangePageSize: function () {
alert('pagesize changed');
},
onSelectPage: function (pageNumber, pageSize) {
alert(pageNumber);
alert(pageSize);
}
});
捕抓到再自己用 Post 處理 這時靈活但又變得很麻煩
所以直接試 URL 方式抓資料
*************************************************************************
URL 方式抓資料
後台寫法:public ActionResult A_Ag_list(int Page=1, int rows = 10)//參數是 easyUI 會送來的
{
AgLib MyAg = new AgLib();
return Json(MyAg._Ag_Get_Ag_Json_List(Page,rows), JsonRequestBehavior.AllowGet);
}
_Ag_Get_Ag_Json_List 裏頭就是根據 Page,rows SQL取資料回傳 json
-----------------------------------------------------------------------------------------------
前台寫法:
$('#Ag_list').datagrid({
url:"A_Ag_list",
...................
這時不能用 $(p).pagination 去捕抓事件 反正就是啥事都不用幹
只要確保 A_Ag_list傳回 Json {total , rows} 其他不用管
這時不但 分頁功能動作 處理中還會 跑出 "資料處理中"
真是強大的工具
基本都幫你處理好了,真的不要想太多
留言
張貼留言