eayui datagrid 分頁 排序 詳解


  最近因為經常使用easyui 在做表格時難免后出現排序 及分頁的問題,但是 在官網中沒有 相關的介紹及例子,所以經過多方面的查找后,終於完成了分頁 和排序的功能

 

首先 頁面datagrid 要排序的必要的條件是 2個 sortable:true,remoteSort: false,見標紅處

 function JTContent(titile) {

            $("#Info").datagrid({
                title: titile + "--二級公司",
                loadMsg: "正在加載數據,請等待!",
                singleSelect: true,
                rownumbers: true,
                remoteSort: false, //必要條件1
                autoRowHeight: false,
                pagination: true,

                queryParams: { "name": "Tload" },
                striped: true,

                align: 'center',

                url: "CouInfo.aspx",

                columns: [[

                 { field: 'T_COMDESC', title: '單位名稱'<spanstyle="color:#ff0000sortable: true, align: 'center' },

                  { field: '電廠地址', title: '地理位置', align: 'center', sortable: true },
                  { field: '所屬省份', title: '所屬省份', align: 'center', sortable: true },

                  { field: '火電裝機容量', title: '火電裝機容量(兆瓦)', align: 'center',sortable:true },
                 { field: '脫硫裝置類型裝機容量', title: '脫硫裝機容量(兆瓦)', align: 'center',sortable: true },

                 { title: '脫硝裝機容量(兆瓦)', field: '脫硝裝置類型裝機容量', align: 'center', sortable: true },
                   { title: '火電廠個數', field: '電廠個數', align: 'center', sortable: true },
                  { title: '火電機組數量(台)', field: '火電機組數量', align: 'center', sortable: true },
                 { title: '脫硫機組數量(台)', field: '脫硫裝置類型機組', align: 'center', sortable: true },
                  { title: '脫硝機組數量(台)', field: '脫硝裝置類型機組', align: 'center', sortable: true },
                  { title: '脫硫裝置套數(套)', field: '脫硫裝置套數', align: 'center', sortable: true },
                    { title: '脫硝裝置套數(套)', field: '脫硝裝置類型機組', align: 'center', sortable: true },
                   { title: '二級單位接入情況', field: '二級單位接入情況', align: 'center', sortable: true }

                            ]]


            }, 'json');

        }

然后就是 easyui每次訪問后台數據時都會默認傳送兩個參數 rows,page

 

rows ---每頁顯示多少條數據 ,page--- 第幾頁

 

這樣大家就知道怎么處理了吧,為了方便大家我封裝了一個dll 大家在頁面引用下就可以用了

 

使用用方式  Common_CFJ.Common_CFJ.datagridData(data);

 

文件下載 http://files.cnblogs.com/DDSkay/Common_CFJ.zip 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM