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篇

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', { '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 方式抓資料
*************************************************************************

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} 其他不用管
這時不但 分頁功能動作 處理中還會 跑出 "資料處理中"
真是強大的工具
基本都幫你處理好了,真的不要想太多
















留言

熱門文章