(轉)EasyUI 分頁總結

 

最近用到了easyui的分頁和搜索欄功能，使用過程中由於運用不熟練導致其間也出現過一些問題，下面做個小結，供大家共同學習。
1.首先使用EasyUI 的DataGrid分頁，得加載其js類庫：
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>


2.新建一個DataGrid
有兩種方法來新建一個DataGrid。下面先說第一種方法。
1）使用table標簽來創建
<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  
        url="datagrid24_getdata.php" toolbar="#tb"  
        title="Load Data" iconCls="icon-save"  
        rownumbers="true" pagination="true">  
    <thead>  
        <tr>  
            <th field="itemid" width="80">Item ID</th>  
            <th field="productid" width="80">Product ID</th>  
            <th field="listprice" width="80" align="right">List Price</th>  
            <th field="unitcost" width="80" align="right">Unit Cost</th>  
            <th field="attr1" width="150">Attribute</th>  
            <th field="status" width="60" align="center">Stauts</th>  
        </tr>  
    </thead>  
</table>  


2）使用js代碼來創建
<script type="text/javascript">
    $(document).ready(function () {
        $('#historydisplay').datagrid({
            title: '歷史數據',
            toolbar: '#search',    //設置工具欄
            fitColumns:true,       //設置列寬度自適應屏幕
            iconCls: 'icon-save',
            url: '@Url.Action("TestData","TCtrl")',
            pageSize:15,        //設置默認分頁大小
            pageList:[10,15,20,25,30,35,40,45,50],   //設置分頁大小
            columns: [[
            { field: 'StoreNum', title: 'StoreNum', width: 80 ,align:'center'},
            { field: 'T1', title: 'T1', width: 80, align: 'center' },
            { field: 'T2', title: 'T2', width: 80, align: 'center' },
            { field: 'O2', title: 'O2', width: 80, align: 'center' },
            { field: 'CO2', title: 'CO2', width: 100, align: 'center' }
            ]],
            pagination: true
        });
    });
</script>


3.在要放置DataGrid的頁面添加div
<table id="historydisplay"></table>


4.編寫后台代碼，對數據進行分頁控制
public ActionResult TestData(int page, int rows,int? storenum,DateTime? datefrom,DateTime? dateto) {
            var total = db.TCtrls.OrderBy(x => x.Id).ToList();
            if (storenum != null)
                total = total.Where(x => x.StoreNum == storenum).ToList();
            if ((datefrom != null) && (dateto != null)) {
                DateTime dateBegin = (DateTime)datefrom;
                DateTime dateEnd = (DateTime)dateto;
                total = total.Where(x => x.Time >= dateBegin).Where(x => x.Time <= dateEnd).ToList();
            }
            var result=total.Skip((page - 1)*rows).Take(rows).ToList();
            Dictionary<string, object> json = new Dictionary<string, object>();  
            json.Add("total",total.ToList().Count);
            json.Add("rows",result);
            return Json(json, JsonRequestBehavior.AllowGet);
        }
我此次是用asp.net mvc3實現的，不過大同小異，只要將總數據量total和最后顯示的結果數據result封裝到JSON對象中即可。


以上部分僅是實現了easyui的分頁，下面來總結下easyui的搜索欄實現
在以上基礎上添加搜索欄，步驟如下：
1.在相應的DataGrid頁面中添加如下代碼：
<div id="search" style="padding:5px;height:auto">  
    <span>庫號:</span>  
    <input id="storenum" style="border:1px solid #ccc"/>  
    <span>日期:</span>  
    <input class="easyui-datebox" style="width:100px"/>至
    <input class="easyui-datebox" style="width:100px"/>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">搜索</a>  
</div>


2.將DataGrid中的toolbar屬性設置為搜索欄div的id。
eg:
toolbar: '#search'
見上面DataGrid的2.2


3.添加響應函數
function doSearch() {
        $('#historydisplay').datagrid('load', {
            storenum: $('#storenum').val(),
            datefrom: $('#datefrom').val(),
            dateto: $('#dateto').val()
        });
}


4.添加相應的后台代碼，對前端傳過去的搜索字段進行處理
具體代碼見DataGrid的步驟4.