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

需求：

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

2、表格带分页功能；

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

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

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

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

效果如下：

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

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

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

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

思路：

很简单，分拆为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 - )).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; }

 }

------------------------------------------------------------------------------

抛砖完毕，还请聪明的你给出更好更漂亮的解决方案哦

且做且珍惜

附件：完整代码下载

秒客网

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

相关文章