文档章节

【原】EasyUI ComboGrid 集成分页、按键示例

temptation_interface
 temptation_interface
发布于 2014/04/02 13:33
字数 1482
阅读 236
收藏 0

需求:

1、下拉框下拉时出现表格;

2、表格带分页功能;

3、可以使用向上键、向下键在表格中移动选择行数据;

4、可以使用回车键在表格中选中行数据;

5、在下拉框的文本框中输入内容,能查询表格;

6、下拉框的文本框的内容变化时,表格数据按分页设置显示

 

效果如下:


思路:

很简单,分拆为combo、datagrid、pagination三个组件分别操作,注意结合的操作就好。

在制作的过程中,比较头痛的是整合, 大体上代码中都加了注释,有些情况大家自己试一下就明白为什么要那样做了,

比如:在分页的页改变事件中要设置表格的pageSize,是为了在文本框变化时,能强制表格按分页的pageSize显示数据。

 

代码:

1、html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="style/js/easyui/themes/metro-green/easyui.css" rel="stylesheet" type="text/css" />
    <link href="style/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="style/js/easyui/jquery.min.js" type="text/javascript"></script>
    <script src="style/js/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="style/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="style/js/biz/comboGridBiz.js" type="text/javascript"></script>
</head>
<body>
    <h3>EasyUI ComboGrid 集成分页示例</h3>
    <div><input id="cg" style="width:150px" /><input type="text" id="txtGender" /></div>
    <input type="hidden" id="hdKeyword" />
</body>
</html>

2、js代码

$(function () {
    $('#cg').combogrid({
        panelWidth: 400,
        idField: 'PersonId',        //ID字段  
        textField: 'PersonName',    //显示的字段  
        url: "ashx/ComboGridHandler.ashx?action=search",
        fitColumns: true,
        striped: true,
        editable: true,
        pagination: true,           //是否分页
        rownumbers: true,           //序号
        collapsible: false,         //是否可折叠的
        fit: true,                  //自动大小
        method: 'post',
        columns: [[
                    { field: 'PersonId', title: '用户编号', width: 80, hidden: true },
                    { field: 'PersonName', title: '用户名称', width: 150 },
                    { field: 'Gender', title: '用户性别', width: 150 }
                ]],
        keyHandler: {
            up: function () {               //【向上键】押下处理
                //取得选中行
                var selected = $('#cg').combogrid('grid').datagrid('getSelected');
                if (selected) {
                    //取得选中行的rowIndex
                    var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
                    //向上移动到第一行为止
                    if (index > 0) {
                        $('#cg').combogrid('grid').datagrid('selectRow', index - 1);
                    }
                } else {
                    var rows = $('#cg').combogrid('grid').datagrid('getRows');
                    $('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1);
                }
            },
            down: function () {             //【向下键】押下处理
                //取得选中行
                var selected = $('#cg').combogrid('grid').datagrid('getSelected');
                if (selected) {
                    //取得选中行的rowIndex
                    var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
                    //向下移动到当页最后一行为止
                    if (index < $('#cg').combogrid('grid').datagrid('getData').rows.length - 1) {
                        $('#cg').combogrid('grid').datagrid('selectRow', index + 1);
                    }
                } else {
                    $('#cg').combogrid('grid').datagrid('selectRow', 0);
                }
            },
            enter: function () {             //【回车键】押下处理
                //设置【性别】文本框的内容为选中行的的性别字段内容
                $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
                //选中后让下拉表格消失
                $('#cg').combogrid('hidePanel');
            },
            query: function (keyword) {     //【动态搜索】处理
                //设置查询参数
                var queryParams = $('#cg').combogrid("grid").datagrid('options').queryParams;
                queryParams.keyword = keyword;
                $('#cg').combogrid("grid").datagrid('options').queryParams = queryParams;
                //重新加载
                $('#cg').combogrid("grid").datagrid("reload");

                $('#cg').combogrid("setValue", keyword);
                //将查询条件存入隐藏域
                $('#hdKeyword').val(keyword);
            }
        },
        onSelect: function () {              //选中处理
            $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
        }
    });

    //取得分页组件对象
    var pager = $('#cg').combogrid('grid').datagrid('getPager');

    if (pager) {
        $(pager).pagination({
            pageSize: 10,               //每页显示的记录条数,默认为10
            pageList: [10, 5, 3],       //可以设置每页记录条数的列表
            beforePageText: '第',       //页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
            //选择页的处理
            onSelectPage: function (pageNumber, pageSize) {
                //按分页的设置取数据
                getData(pageNumber, pageSize);
                //设置表格的pageSize属性,表格变化时按分页组件设置的pageSize显示数据
                $('#cg').combogrid("grid").datagrid('options').pageSize = pageSize;
                //将隐藏域中存放的查询条件显示在combogrid的文本框中
                $('#cg').combogrid("setValue", $('#hdKeyword').val());
                $('#txtGender').val('');
            },
            //改变页显示条数的处理
            //(处理后还是走onSelectPage事件,所以设置也写到onSelectPage事件中了)
            onChangePageSize: function () { },
            //点击刷新的处理
            onRefresh: function (pageNumber, pageSize) {
                //按分页的设置取数据
                getData(pageNumber, pageSize);
                //将隐藏域中存放的查询条件显示在combogrid的文本框中
                $('#cg').combogrid("setValue", $('#hdKeyword').val());
                $('#txtGender').val('');
            }
        });
    }

    var getData = function (page, rows) {
        $.ajax({
            type: "POST",
            url: "ashx/ComboGridHandler.ashx?action=search",
            data: "page=" + page + "&rows=" + rows + "&keyword=" + $('#hdKeyword').val(),
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
                $.messager.progress('close');
            },
            success: function (data) {
                $('#cg').combogrid('grid').datagrid('loadData', data);
            }
        });
    };
});

3、ashx代码

/// <summary>
    /// ComboGridHandler 的摘要说明
    /// </summary>
    public class ComboGridHandler : IHttpHandler
    {
        /// <summary>
        /// 
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            string action = context.Request.Params["action"];

            //页数
            int PageNum = Convert.ToInt32(context.Request["page"]);
            //每一页多少条数据
            int Record = Convert.ToInt32(context.Request["rows"]);

            //模拟数据
            List<Person> list = MockData();

            Dictionary<string, object> resultDic = new Dictionary<string, object>();

            switch (action)
            {
                case "search":

                    var condition = context.Request["keyword"] ?? string.Empty;

                    List<Person> result = (from item in list
                                           where item.PersonName.Contains(condition)    //条件查询
                                           select item).ToList<Person>();

                    resultDic.Add("total", result.Count);
                    resultDic.Add("rows", (result.Skip(Record * (PageNum - 1)).Take(Record)).ToList());

                    break;
            }

            JavaScriptSerializer serializer = new JavaScriptSerializer();

            context.Response.Write(serializer.Serialize(resultDic));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        /// <summary>
        /// 模拟数据
        /// </summary>
        /// <returns></returns>
        public List<Person> MockData()
        {
            List<Person> list = new List<Person>() { 
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "叶宇", Gender = "女" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张兄家", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张洋", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "洪自军", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "王生杰", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "吴庆庆", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "武建昌", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘瑞", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张辽", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张颌", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘备", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘禅", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘表", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张震岳", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张学友", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张信哲", Gender = "男" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张悬", Gender = "女" },
                new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张惠妹", Gender = "女" }
            };

            return list;
        }
    }

4、实体类代码

[Serializable]
    public class Person
    {
        public string PersonId { get; set; }

        public string PersonName { get; set; }

        public string Gender { get; set; }
    }


© 著作权归作者所有

temptation_interface
粉丝 2
博文 2
码字总数 2806
作品 0
合肥
程序员
私信 提问
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
jQuery EasyUI 1.4.3 发布

jQuery EasyUI 1.4.3 发布,更新内容如下: 错误 textbox: “setText” 方法不接受 0 值,已修复。 timespinner: 在 IE11 下,单击空 textbox 出错,已修复。 tabs: “update” 方法不能只更...

ejzhang
2015/07/03
9.2K
26
easyui-table表格客户端分页实例

版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083 一、前言 前一篇博客已经介绍了bootstrap-table的客户端分页,而本...

尘光掠影
2017/08/06
0
0
easyui combogrid loadData加载不出来的问题

在easyui中用combogrid加载数据总是不成功,有没有遇到类是的问题的呢 代码 http://runjs.cn/detail/xukgvv5z 同样的数据 ,加载到表格上没有问题,加载到combogrid上却加载不了 var a = [{...

xxiu
2013/01/01
3.6K
2
关于easyui datagrid分页的json格式

在网上找了很多资料,始终无法知晓easyui如果分页的话,需要传哪些值,并且json的组成格式是什么样的。 看了一篇质量比较好的博文,http://blog.sina.com.cn/s/blog8263c3c701014m10.html,得...

supperman
2012/08/26
9K
4

没有更多内容

加载失败,请刷新页面

加载更多

官方来源的 Duo Mobile App 解决了我的 Network Difficulties 问题

https://help.duo.com/s/article/2094?language=en_US 我利用百度搜索下载了一个 Duo Mobile App (由于 Google Play)在大陆不可用。 在扫描旧手机上的 Duo Mobile App 的二维码时, 显示出错...

圣洁之子
4分钟前
1
0
Zabbix监控Mysql容器(Docker容器)主从是否存活

1、在Zabbix Web端创建模板

abowu
6分钟前
1
0
基于 RocketMQ 的同城双活架构在美菜网的挑战与实践

本文整理自李样兵在北京站 RocketMQ meetup分享美菜网使用 RocketMQ 过程中的一些心得和经验,偏重于实践。 嘉宾李样兵,现就职于美菜网基础服务平台组,负责 MQ ,配置中心和任务调度等基础...

大涛学长
12分钟前
1
0
设计模式之:外观模式和桥接模式

作者:DevYK 链接:https://juejin.im/post/5d7e01f4f265da03b5747aac 外观模式 介绍 外观模式 (Facade) 在开发过程中的运用评率非常高,尤其是在现阶段,各种第三方 SDK “充斥” 在我们周边...

Java架构Monster
13分钟前
1
0
人证合一核验设备

人脸身份验证机,人证合一设备1:N如我们现在在车站或一些重要的场所如步行街、城中村等人流密集的场所应用的人脸识别布控系统,其特点是动态和非配合。所谓的动态也就是识别的不是照 片,不是...

非思丸智能
15分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部