jquery easyui datagrid 分頁詳解

因爲項目緣由，用了jquery easyui 感受界面不錯，皮膚樣式少點，但是官網最近打不開了，資料比較少，給的demo沒有想要的效果，今天在用datagrid 作分頁顯示的時候，折騰了半天，網上的資料也比較少，後本身動手，終於解決，廢話不說，開始：

datagrid分頁有一個附加的分頁控件，只需後臺獲取分頁控件自動提交的兩個參數rows每頁顯示的記錄數和page;//當前第幾頁

而後讀取相應頁數的記錄，和總記錄數total一塊返回便可 界面以下：

一、下邊是datagrid的顯示對話框，我直接用table把列頭顯示出來，感受比用js寫要易於閱讀

<table id="list_data" cellspacing="0" cellpadding="0"> 
    <thead> 
        <tr> 
            <th field="fldAppDept" width="100">部門</th> 
            <th field="fldAppNode" width="100">網站</th> 
            <th field="fldAppName" width="100">名稱</th> 
            <th field="fldAppMgr" width="100">管理員</th> 
            <th field="fldAppNote" width="100">註釋</th> 
            <th field="fldAppType" width="100">類型</th> 
            <th field="fldTelphone" width="100">電話</th> 
            <th field="fldAppImg" width="100">職務</th> 
            <th field="fldAppMonitor" width="100">啓用監測</th> 
            <th field="fldAppLevel" width="100">要重級別</th> 
        </tr> 
    </thead> 
</table> 

二、js代碼，用於構建datagrid

注意 要想顯示分頁控件，pagination屬性必須爲true

$(function() {
    //datagrid初始化 
    $('#list_data').datagrid({ 
        title:'應用系統列表', 
        iconCls:'icon-edit',//圖標 
        width: 700, 
        height: 'auto', 
        nowrap: false, 
        striped: true, 
        border: true, 
        collapsible:false,//是否可摺疊的 
        fit: true,//自動大小 
        url:'listApp.action', 
        //sortName: 'code', 
        //sortOrder: 'desc', 
        remoteSort:false,  
        idField:'fldId', 
        singleSelect:false,//是否單選 
        pagination:true,//分頁控件 
        rownumbers:true,//行號 
        frozenColumns:[[ 
            {field:'ck',checkbox:true} 
        ]], 
        toolbar: [{ 
            text: '添加', 
            iconCls: 'icon-add', 
            handler: function() { 
                openDialog("add_dialog","add"); 
            } 
        }, '-', { 
            text: '修改', 
            iconCls: 'icon-edit', 
            handler: function() { 
                openDialog("add_dialog","edit"); 
            } 
        }, '-',{ 
            text: '刪除', 
            iconCls: 'icon-remove', 
            handler: function(){ 
                delAppInfo(); 
            } 
        }], 
    }); 
    //設置分頁控件 
    var p = $('#list_data').datagrid('getPager'); 
    $(p).pagination({ 
        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');
        }*/ 
    }); 
});

三、後臺我是經過struts2處理的數據 返回json串

private JSONObject result;//返回的json  
       
    private String rows;//每頁顯示的記錄數  
       
    private String page;//當前第幾頁  
   
        private AppServiceInter appService;  
   
    public JSONObject getResult() {  
        return result;  
    }  
    public void setResult(JSONObject result) {  
        this.result = result;  
    }  
    public void setAppService(AppServiceInter appService) {  
        this.appService = appService;  
    }  
   
        public String getRows() {  
        return rows;  
    }  
    public void setRows(String rows) {  
        this.rows = rows;  
    }  
    public String getPage() {  
        return page;  
    }  
    public void setPage(String page) {  
        this.page = page;  
    }  
        /** 
     * 查詢應用系統 
     * @return 
     */ 
    public String listApp() {  
        System.out.println("---------------");  
        //當前頁  
        int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);  
        //每頁顯示條數  
        int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);  
        //每頁的開始記錄  第一頁爲1  第二頁爲number +1   
        int start = (intPage-1)*number;  
           
        List<TblApp> list = appService.findByPageApp(start,number);//每頁的數據，放入list  
            Map<String, Object> jsonMap = new HashMap<String, Object>();//定義map  
            jsonMap.put("total", appService.getCountApp());//total鍵 存放總記錄數，必須的  
            jsonMap.put("rows", list);//rows鍵 存放每頁記錄 list  
            result = JSONObject.fromObject(jsonMap);//格式化result   必定要是JSONObject  
           
        //result = JSONArray.fromObject(jsonMap);  
        return SUCCESS;  
    }  

四、附上struts.xml配置文件

<package name="app" extends="json-default">  
        <action name="listApp" class="appAction" method="listApp">  
            <result type="json">  
                <param name="root">result</param>  
            </result>  
        </action>  
</package>  

特寫出這些，方便本身或他人之後參考 ，若是有什麼問題你們能夠留言......

本文轉自：http://www.cnblogs.com/huozhicheng/archive/2011/09/27/2193605.html