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

最新推荐文章于 2019-07-20 15:22:00 发布

chiyi3285

最新推荐文章于 2019-07-20 15:22:00 发布

阅读量250

点赞数

文章标签： xhtml json javascript ViewUI

原文链接：https://my.oschina.net/interface/blog/215433

版权

需求：

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; }
    }

转载于:https://my.oschina.net/interface/blog/215433