最近用到了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" οnclick="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