最近用到了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.

(转)EasyUI 分页总结的更多相关文章

  1. 【技巧】EasyUI分页组件pagination显示项控制

    我们使用easyui分页时,分页组件显示项有很多,默认如下是这样的: 有时候我们并不想显示这么多控制项,我们可以通过属性来控制:如下来自EasyUI官网: 如下写法,在datagrid中使用,如下控制 ...

  2. easyui分页的使用方法

    使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").dat ...

  3. MVC 使用Jquery EasyUI分页成功

    先上图吧

  4. easyui 分页实现

    1.用datagrid 做分页显示, 依据API样例,最终解决.废话不说,datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是 ...

  5. 后台使用oracle前台使用easyui分页机制

    前台easyui 的datagrid中设置分页属性: pagination:true,//显示分页 pagePosition:'bottom',//分页栏位置 both 上下 bottom.top p ...

  6. easyUI分页实现加搜索功能

    前台页面: js代码: ps:pagination为true时会在table下面加上easyUI的分页. load函数会将查询值传给datagrid并传给后台重新加载. DAO.xml为: 后台代码实 ...

  7. EasyUI 分页 简洁代码

    做分页代码,看到网上很多人实现的方法,那是各种调用,各种获取对象.我很不解,因为Easyui已经给我们了分页的具体实现,为什么有些人要画蛇添足呢. 其实真正的分页,在你的代码中,别人可能都没有注意到, ...

  8. 关于easyUI分页

    首先前台会传来两个参数,分别是rows(一页数据的大小,即一页有多少条数据)和page(第几页),根据这两个参数可以计算出从数据库中从第几 条数据开始取和要取多少条数据.数据取出来后,因为easyUI ...

  9. Struts2与easyui分页查询

    easyui里面分页查询:在easyui框架里面已经进行一些分装,所以我们只要进行后台分页查询即可 web.xml和struts.xml文件的配置的就不需要我多说了,和分页前代码一样,不需要更改: 需 ...

随机推荐

  1. SQL调用C# dll(第二中DLL,强名称密匙)

    参考:微软官网 https://msdn.microsoft.com/zh-cn/library/ms345106(es-es).aspx 1.新建项目 SQLDllTestUsingNew Clas ...

  2. tensorflow 指定使用gpu处理,tensorflow占用多个GPU但只有一个在跑

    我们在刚使用tensorflow的过程中,会遇到这个问题,通常我们有多个gpu,但是 在通过nvidia-smi查看的时候,一般多个gpu的资源都被占满,但是只有一个gpu的GPU-Util 和 21 ...

  3. oracle 日志恢复数据

    1:首先查找redo,如果redo有可供恢复的信息,就那redo中的信息进行恢复,此时一般在恢复时,类似如下:SQL> recover database;Media recovery compl ...

  4. myEclips 中的项目复制重命名

    现在有个项目Pj ,要复制一个Pu 一,退出 myEclips. 二,找到Pj备份一份到其他目录. 三,进入myEclips,F2修改项目名Pj至Pu. 四,将备份拷贝回原目录. 五,将Pj重新引进m ...

  5. jquery 页面传值 汉字

    function getURLParameter(name) { return decodeURIComponent( (new RegExp('[?|&]' + name + '=' + ' ...

  6. Error:Error: Avoid non-default constructors in fragments: use a default constructor plus Fragment#setArguments(Bundle) instead [ValidFragment]

    原文博客链接:https://blog.csdn.net/chniccs/article/details/51258972 在创建fragment时,你可能在打包时碰到如下错误 Error:Error ...

  7. 加载 AssetBundle 的四种方法

    [加载 AssetBundle 的四种方法] 1.AssetBundle.LoadFromMemoryAsync(byte[] binary, uint crc = 0); 返回AssetBundle ...

  8. appium的内存泄露问题

    appium的一个内存泄露的问题 标签(空格分隔): appium 我们在做移动端的测试后时候,经常会用到appium 但是有时候我们跑一个小时候/2个小时候时候,会遇到appium报错的信息: ap ...

  9. 外购半成品报SHORT问题(验货客户)

    描述:下图中可以看到外购半成品层物料报SHORT 2.开始检查数据 --针对外购半成品(外购半成品的成品层有BOM数据,外购半成品没有BOM数据) '; --select * from TB_ADDB ...

  10. java集合: ArrayList源码浅析

    ArrayList 是一个动态数组,线程不安全 ,允许元素为null. ArrayList的数据结构是数组,查询比较方便. ArrayList类的接口 public class ArrayList&l ...