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

最新推荐文章于 2023-09-13 16:41:23 发布
最新推荐文章于 2023-09-13 16:41:23 发布
阅读量5.2k 收藏 1
点赞数 2
分类专栏： 前端、报表相关 文章标签： easyui combogrid下拉表

需求：

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

2、表格带分页功能；

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

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

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

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

 

效果如下：

图1、

图2、

图3、

图4、

 

思路：

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

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

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

 

代码：

1、html代码

[html]  view plain  copy
  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 rel="external nofollow" href="style/js/easyui/themes/metro-green/easyui.css" rel="stylesheet" type="text/css" />  
  6.     <link rel="external nofollow" 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代码

[javascript]  view plain  copy
  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代码

[csharp]  view plain  copy
  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.         Dictionary<string, object> resultDic = new Dictionary<string, object>();  
  23.   
  24.         switch (action)  
  25.         {  
  26.             case "search":  
  27.                 var condition = context.Request["keyword"] ?? string.Empty;  
  28.                 List<Person> result = (from item in list  
  29.                             where item.PersonName.Contains(condition)    //条件查询  
  30.                             select item).ToList<Person>();  
  31.                 resultDic.Add("total", result.Count);  
  32.                 resultDic.Add("rows", (result.Skip(Record * (PageNum - 1)).Take(Record)).ToList());  
  33.                 break;  
  34.         }  
  35.   
  36.         JavaScriptSerializer serializer = new JavaScriptSerializer();  
  37.         context.Response.Write(serializer.Serialize(resultDic));  
  38.     }  
  39.   
  40.     public bool IsReusable  
  41.     {  
  42.         get  
  43.         {  
  44.             return false;  
  45.         }  
  46.     }  
  47.   
  48.     /// <summary>  
  49.     /// 模拟数据  
  50.     /// </summary>  
  51.     /// <returns></returns>  
  52.     public List<Person> MockData()  
  53.     {  
  54.         List<Person> list = new List<Person>() {   
  55.             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "叶宇", Gender = "女" },  
  56.             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张兄家", Gender = "男" },  
  57.             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张洋", Gender = "男" },  
  58.             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "洪自军", Gender = "男" },  
  59.             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "王生杰", Gender = "男" },  
  60.             new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "吴庆庆", Gender = "男" },  
  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.         };  
  74.         return list;  
  75.     }  
  76. }  

4、实体类代码

[csharp]  view plain  copy
  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. }  
xfl4629712
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
EasyUI ComboGrid 集成分页、按键示例
04-27
asyUI ComboGrid 集成分页、按键示例源码 源码描述： 实现的功能： 1、下拉框下拉时出现表格； 2、表格带分页功能； 3、可以使用向上键、向下键在表格中移动选择行数据； 4、可以使用回车键在表格中选中行数据； 5、在下拉框的文本框中输入内容，能查询表格； 6、下拉框的文本框的内容变化时，表格数据按分页设置显示 所用技术：jquery+在html页面中通过js文件调用ashx一般处理程序 运行环境：vs2010+无数据库
easyui combogrid实现本地模糊搜索过滤多列
08-30
本篇文章主要介绍了easyui combogrid实现本地模糊搜索过滤多列，非常具有实用价值，需要的朋友可以参考下
easyui combogrid分页加载默认值时无法自动跳转到相应页的解决方案
weixin_34161032的博客
08-18 471
2019独角兽企业重金招聘Python工程师标准>>> ...
下拉框(el-select)带分页
chenThreeMetals的博客
06-21 7972
下拉框(el-select)带分页 这个功能我是以一个组件的形式实现的 父级页面 <newPageSelect ref="newPageSelect" @selectPageChange="selectPageChange" :getUrl="getUrl" :serialNumber="serialNumber"></newPageSelect> //引入组件 import newPageSelect from '@/views/components/selectPag
Element el-select的下拉框实现分页加载并且下拉加载更多
weixin_44738844的博客
04-21 2075
【代码】Element el-select的下拉框实现分页加载并且下拉加载更多。
Jquery EasyUI使用ComboGrid
cyberzhaohy的专栏
11-11 5751
1.1 实现功能： 1、combogrid完成开发，可以进行排序，和过滤查询数据； 2、解决排序和索引越界问题； 3、比较字符串使用equals方法，内部循环边界值要小于数组长度-1 4、创建时间显示出来了。 之前不显示是因为前台字段和后台返回字段差一个字母。 5、简化属性复制，采用框架自带类 1.2 界面效果：
【原】EasyUI ComboGrid 集成分页、按键示例
chiyi3285的博客
04-02 238
需求： 1、下拉框下拉时出现表格； 2、表格带分页功能； 3、可以使用向上键、向下键在表格中移动选择行数据； 4、可以使用回车键在表格中选中行数据； 5、在下拉框的文本框中输入内容，能查询表格； 6、下拉框的文本框的内容变化时，表格数据按分页设置显示 效果如下： ...
easyui---combogrid
weixin_33895016的博客
10-31 370
选择一个数据表格某行记录 依赖panel 和datagrid combogrid:<select id="cc" name="dept" style="width:250px;"></select> $('#cc').combogrid({ panelWidth:450,//面板宽度 ...
EasyUI ComboGrid 分页
weixin_34354945的博客
04-30 181
一、使用场景 　　下拉框可以很方便地为我们提供选择功能，通过下拉框我们可以便捷地选择某个值，而不需要手动输入。在EasyUI中有ComboGrid与之对应。ComboGrid既可以当中下拉框来使用，又可以进行搜索，展示与当前输入的字符相匹配的数据。 　　一般我们有两种方式使用ComboGrid。一种是将数据先获取，带到页面，然后在页面加载的时候进行渲染；另一种是当页面加载完成后，通过ajax请...
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
热门推荐
wocwin的博客
02-28 1万+
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
EasyUi中的Combogrid 实现分页和动态搜索远程数据
10-22
jquery easyui中的combogrid比较特殊，算是combo和grid的组合，combogrid结合一个可编辑的文本框和下拉数据网格面板，可以让用户迅速找到并选择，又...下面给大家介绍EasyUi中的Combogrid 实现分页和动态搜索远程数据
jquery easyui 使用带分页的combogrid
weixin_34252686的博客
10-10 177
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery easyui 中combogrid , datagrid 自定义分页
zhxh0376的专栏
06-05 2563
以             去掉记录相关字符 去掉前                                                                                        去掉后 第一中方法 1.取到combogrid的datagrid var comDataGrid = $(itemId).combogrid('g
EasyUI中的combogrid实现分页功能
乔峰的专栏
03-07 9649
在jquery.easyUI.js 要实现分页，必须在后台接收参数时声明两个变量：page(当前第几页),rows(每页显示多少条信息),否者easyUI前台传递不了分页参数。 这两个属性的名称在easyUI里面定义的。 1、前台JS代码 $('#shopId').combogrid({                       panelWidth:400,
选择框下拉分页
qq_43840793的博客
06-20 372
2、准备几个对象，在data里。queryParamsLand是接口需要的参数，pageGroupLand是我们分页要用的参数，其中pageIndex是页码，totalPage是总页数，比如35块地，每页10条，总页数就是4页。选择框选择地块，下拉列表有35条地块，不是一次性加载完，而是每次显示10条数据，当鼠标滑到底部时加载下一页。3、写一个获取指定页码地块列表的函数。输入参数是pageIndex，即页码。4、定义loadMore指令，directives与created平级。
element ui select下拉框分页（使用自定义指令完成）
MonkeySun_b的博客
05-22 430
element ui select下拉框分页 自定义指令
html下拉列表分页,SelectPage
weixin_34471838的博客
06-03 839
多功能下拉选择插件 SelectPage简洁而强大的下拉分页选择器；支持远程数据(AJAX)、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件入门指南、实例、文档更多实例、文档请访问：项目GitHub地址：插件效果多选模式效果图：默认单选模式效果图：纯下拉选择(不分页)模式：什么是SelectPage功能特点基于jQuery兼容Bootstr...
html给下拉框添加搜索、分页功能（通过ajax从服务器获取搜索数据）
最新发布
学长抄作业（codeying）博客codeying.top
09-13 1534
jquery 下拉搜索分页组件
vue，element ui中的el-select数据量大实现下拉框分页
xixi的博客
09-04 4749
分页组件还是用element ui里的，这样相对而言代码更简洁了，el-select下拉框分页代码具体如下： <template> <el-select v-model="valueuser" placeholder="请选择用户" class="interval" @change="selectuser"> <el-option v-for="item in userlist.slice((currentPage-1) * pagesize, current
easyui combogrid checkbox
03-25
如何获取选中的值？ 您可以使用以下代码来获取 EasyUI ComboGrid Checkbox 中所有选中的值： var selectedRows = $('#grid').datagrid('getChecked'); 其中，'#grid' 是指向 EasyUI ComboGrid Checkbox 的选择器，'getChecked' 是 EasyUI Grid 的 API 函数，可以获取所有选中的行数据。通过这种方法，您就可以获取 EasyUI ComboGrid Checkbox 中选中的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值