需求：

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

2、表格带分页功能；

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

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

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

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

效果如下：

图1、

图2、

图3、

图4、

思路：

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

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

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

代码：

1、html代码

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

2、js代码

  1.  $(function () {
  2.      $('#cg').combogrid({
  3.          panelWidth: 400,
  4.          idField: 'PersonId',        //ID字段
  5.          textField: 'PersonName',    //显示的字段
  6.          url: "ashx/ComboGridHandler.ashx?action=search",
  7.          fitColumns: true,
  8.          striped: true,
  9.          editable: true,
  10.          pagination: true,           //是否分页
  11.          rownumbers: true,           //序号
  12.          collapsible: false,         //是否可折叠的
  13.          fit: true,                  //自动大小
  14.          method: 'post',
  15.          columns: [[
  16.                      { field: 'PersonId', title: '用户编号', width: 80, hidden: true },
  17.                      { field: 'PersonName', title: '用户名称', width: 150 },
  18.                      { field: 'Gender', title: '用户性别', width: 150 }
  19.                  ]],
  20.          keyHandler: {
  21.              up: function () {               //【向上键】押下处理
  22.                  //取得选中行
  23.                  var selected = $('#cg').combogrid('grid').datagrid('getSelected');
  24.                  if (selected) {
  25.                      //取得选中行的rowIndex
  26.                      var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
  27.                      //向上移动到第一行为止
  28.                      if (index > 0) {
  29.                          $('#cg').combogrid('grid').datagrid('selectRow', index - 1);
  30.                      }
  31.                  } else {
  32.                      var rows = $('#cg').combogrid('grid').datagrid('getRows');
  33.                      $('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1);
  34.                  }
  35.              },
  36.              down: function () {             //【向下键】押下处理
  37.                  //取得选中行
  38.                  var selected = $('#cg').combogrid('grid').datagrid('getSelected');
  39.                  if (selected) {
  40.                      //取得选中行的rowIndex
  41.                      var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
  42.                      //向下移动到当页最后一行为止
  43.                      if (index < $('#cg').combogrid('grid').datagrid('getData').rows.length - 1) {
  44.                          $('#cg').combogrid('grid').datagrid('selectRow', index + 1);
  45.                      }
  46.                  } else {
  47.                      $('#cg').combogrid('grid').datagrid('selectRow', 0);
  48.                  }
  49.              },
  50.              enter: function () {             //【回车键】押下处理
  51.                  //设置【性别】文本框的内容为选中行的的性别字段内容
  52.                  $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
  53.                  //选中后让下拉表格消失
  54.                  $('#cg').combogrid('hidePanel');
  55.              },
  56.              query: function (keyword) {     //【动态搜索】处理
  57.                  //设置查询参数
  58.                  var queryParams = $('#cg').combogrid("grid").datagrid('options').queryParams;
  59.                  queryParams.keyword = keyword;
  60.                  $('#cg').combogrid("grid").datagrid('options').queryParams = queryParams;
  61.                  //重新加载
  62.                  $('#cg').combogrid("grid").datagrid("reload");
  63.  
  64.                  $('#cg').combogrid("setValue", keyword);
  65.                  //将查询条件存入隐藏域
  66.                  $('#hdKeyword').val(keyword);
  67.              }
  68.          },
  69.          onSelect: function () {              //选中处理
  70.              $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
  71.          }
  72.      });
  73.  
  74.      //取得分页组件对象
  75.      var pager = $('#cg').combogrid('grid').datagrid('getPager');
  76.  
  77.      if (pager) {
  78.          $(pager).pagination({
  79.              pageSize: 10,               //每页显示的记录条数，默认为10
  80.              pageList: [10, 5, 3],       //可以设置每页记录条数的列表
  81.              beforePageText: '第',       //页数文本框前显示的汉字
  82.              afterPageText: '页    共 {pages} 页',
  83.              displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
  84.              //选择页的处理
  85.              onSelectPage: function (pageNumber, pageSize) {
  86.                  //按分页的设置取数据
  87.                  getData(pageNumber, pageSize);
  88.                  //设置表格的pageSize属性，表格变化时按分页组件设置的pageSize显示数据
  89.                  $('#cg').combogrid("grid").datagrid('options').pageSize = pageSize;
  90.                  //将隐藏域中存放的查询条件显示在combogrid的文本框中
  91.                  $('#cg').combogrid("setValue", $('#hdKeyword').val());
  92.                  $('#txtGender').val('');
  93.              },
  94.              //改变页显示条数的处理
  95.              //（处理后还是走onSelectPage事件，所以设置也写到onSelectPage事件中了）
  96.              onChangePageSize: function () { },
  97.              //点击刷新的处理
  98.              onRefresh: function (pageNumber, pageSize) {
  99.                  //按分页的设置取数据
  100.                  getData(pageNumber, pageSize);
  101.                  //将隐藏域中存放的查询条件显示在combogrid的文本框中
  102.                  $('#cg').combogrid("setValue", $('#hdKeyword').val());
  103.                  $('#txtGender').val('');
  104.              }
  105.          });
  106.      }
  107.  
  108.      var getData = function (page, rows) {
  109.          $.ajax({
  110.              type: "POST",
  111.              url: "ashx/ComboGridHandler.ashx?action=search",
  112.              data: "page=" + page + "&rows=" + rows + "&keyword=" + $('#hdKeyword').val(),
  113.              error: function (XMLHttpRequest, textStatus, errorThrown) {
  114.                  alert(textStatus);
  115.                  $.messager.progress('close');
  116.              },
  117.              success: function (data) {
  118.                  $('#cg').combogrid('grid').datagrid('loadData', data);
  119.              }
  120.          });
  121.      };
  122.  });

3、ashx代码

  1.  /// <summary>
  2.  /// ComboGridHandler 的摘要说明
  3.  /// </summary>
  4.  public class ComboGridHandler : IHttpHandler
  5.  {
  6.  /// <summary>
  7.  ///
  8.  /// </summary>
  9.  /// <param name="context"></param>
  10.  public void ProcessRequest(HttpContext context)
  11.  {
  12.      context.Response.ContentType = "application/json";
  13.      string action = context.Request.Params["action"];
  14.  
  15.      //页数
  16.      int PageNum = Convert.ToInt32(context.Request["page"]);
  17.      //每一页多少条数据
  18.      int Record = Convert.ToInt32(context.Request["rows"]);
  19.  
  20.      //模拟数据
  21.      List<Person> list = MockData();
  22.  
  23.      Dictionary<string, object> resultDic = new Dictionary<string, object>();
  24.  
  25.      switch (action)
  26.      {
  27.          case "search":
  28.  
  29.              var condition = context.Request["keyword"] ?? string.Empty;
  30.  
  31.              List<Person> result = (from item in list
  32.                          where item.PersonName.Contains(condition)    //条件查询
  33.                          select item).ToList<Person>();
  34.  
  35.              resultDic.Add("total", result.Count);
  36.              resultDic.Add("rows", (result.Skip(Record * (PageNum - )).Take(Record)).ToList());
  37.  
  38.              break;
  39.      }
  40.  
  41.      JavaScriptSerializer serializer = new JavaScriptSerializer();
  42.  
  43.      context.Response.Write(serializer.Serialize(resultDic));
  44.  }
  45.  
  46.  public bool IsReusable
  47.  {
  48.      get
  49.      {
  50.          return false;
  51.      }
  52.  }
  53.  
  54.  /// <summary>
  55.  /// 模拟数据
  56.  /// </summary>
  57.  /// <returns></returns>
  58.  public List<Person> MockData()
  59.  {
  60.      List<Person> list = new List<Person>() {
  61.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "叶宇", Gender = "女" },
  62.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张兄家", Gender = "男" },
  63.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张洋", Gender = "男" },
  64.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "洪自军", Gender = "男" },
  65.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "王生杰", Gender = "男" },
  66.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "吴庆庆", Gender = "男" },
  67.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "武建昌", Gender = "男" },
  68.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘瑞", Gender = "男" },
  69.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张辽", Gender = "男" },
  70.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张颌", Gender = "男" },
  71.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘备", Gender = "男" },
  72.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘禅", Gender = "男" },
  73.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘表", Gender = "男" },
  74.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张震岳", Gender = "男" },
  75.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张学友", Gender = "男" },
  76.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张信哲", Gender = "男" },
  77.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张悬", Gender = "女" },
  78.          new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张惠妹", Gender = "女" }
  79.      };
  80.  
  81.      return list;
  82.  }

4、实体类代码

  1.  [Serializable]
  2.  public class Person
  3.  {
  4.      public string PersonId { get; set; }
  5.  
  6.      public string PersonName { get; set; }
  7.  
  8.      public string Gender { get; set; }
  9.  }

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

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

且做且珍惜

附件：完整代码下载

【原】EasyUI ComboGrid 集成分页、按键示例的更多相关文章

  1. easyui combogrid下拉表格的分页/按键/动态搜索

    作者:xfl4629712  <  easyui combogrid下拉表格的分页/按键/动态搜索  > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...

  2. EasyUI DataGrid 分页实现示例

    使用easyui可以很方便的开发web程序,这儿仅展示一个后台使用mvc来实现分页的示例,截图如下 示例代码如下 1. 创建模型类,代码如下 using System; using System.Co ...

  3. EasyUI ComboGrid的绑定，上下键和回车事件，输入条件查询

    首先我们先看一下前台的绑定事件 1.先定义标签 <input id="cmbXm" type="text" style="width: 100p ...

  4. 问题：做EsayUI分页报错 $(...).pagination is not a function之后我把<jsp:include page="top.jsp"/>去掉就好了，有大神知道为什么吗？另外分页按键放在那里好些，我放到form表单下，就开始显示，点一下后就没有了

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  5. EasyUI的datagrid分页

    EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...

  6. scroll事件实现监控滚动条并分页显示示例（zepto.js）

    scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...

  7. easy-ui treegrid 实现分页 并且添加自定义checkbox

    首先第一点easy-ui  treegrid 对分页没有好的实现, 因为在分页的过程中是按照 根节点来分页的  后台只能先按照 根节点做分页查询  再将子节点关联进去, 这样才能将treegrid 按 ...

  8. easyui的datagrid分页写法小结

    easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 //关闭tab1打开tab2 查询Detail function refundDetail(){ $('#tt').tab ...

  9. 表单（中）-EasyUI Combogrid 组合网格、EasyUI Numberbox 数字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期时间框、EasyUI Calendar 日历

    EasyUI Combogrid 组合网格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults.通过 $.fn.combogrid.defaults 重写 ...

随机推荐

  1. v14.0\AspNet\Microsoft.Web.AspNet.Props 找不到

    错误 E:\Github\AutoMapper\src\AutoMapper\AutoMapper.CoreCLR.kproj : error  : 未找到导入的项目"C:\Program ...

  2. CentOS7 安装Mono及Jexus

    CentOS7安装Mono及Juxes 1 安装Mono 1.1 安装yum-utils 因为安装要用到yum-config-manager,默认是没有安装的,所以要先安装yum-utils包.命令如 ...

  3. 为支持ASP.NET5跨平台，Jexus再添新举措

    Jexus作为一款运行于Linux/FreeBSD平台上,以支持ASP.NET著称的高性能HTTP服务器和反向代理服务器,继5.6版完成对OWIN标准应用的支持后,就把着力点放到了对ASP.NET5的 ...

  4. 值得收藏！国外最佳互联网安全博客TOP 30

    如果你是网络安全从业人员,其中重要的工作便是了解安全行业的最新资讯以及技术趋势,那么浏览各大安全博客网站或许是信息来源最好的方法之一.最近有国外网站对50多个互联网安全博客做了相关排名,小编整理其中排 ...

  5. ES6+ 现在就用系列（一)：为什么使用ES6+

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

  6. CSharpGL(12)用T4模板生成CSSL及其renderer代码

    CSharpGL(12)用T4模板生成CSSL及其renderer代码 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立 ...

  7. MySQL基础之存储过程

    学过之后却没有总结,今天好不容易有点时间来看看. 存储过程的优势 1.简化复杂的SQL语句,将多个SQL语句封装成为一个存储过程,可以在其中加上一些流程控制语句 2.存储过程封装在数据库内部,编译之后 ...

  8. javascript关于立即函数

    以前的知识总是忘,遇到代码又看不懂.要再复习一下,顺便记录一下. 关于立即执行函数:  函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名 ...

  9. Java环境变量-Linux环境

    环境变量说明 JAVA_HOME 它指向jdk的安装目录,Eclipse/NetBeans/Tomcat等软件就是通过搜索JAVA_HOME变量来找到并使用安装好的jdk. PATH 作用是指定命令搜 ...

  10. 透视 HTML子元素的margin-top样式会应用在父元素上的原由

    情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...