easyui combogrid下拉表格的分页/按键/动态搜索
作者：xfl4629712 《 easyui combogrid下拉表格的分页/按键/动态搜索 》
需求：
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 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代码。
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 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、实体类代码
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下拉表格的分页/按键/动态搜索的更多相关文章
- easyui combogrid 下拉框 智能输入
1. 后台代码 using System;using System.Collections;using System.Collections.Generic;using System.Linq;usi ...
- 关于easyui combobox下拉框实现多选框的实现
好长时间没有更博了,一是因为最近真的比较忙,二是因为自己是真的偷懒了,哈哈 好啦,这篇博客主要是总结一些关于easyui combobox下拉框实现多选框的实现,包括前台界面的展示,和后台对数据的获取 ...
- easyui combobox下拉框复制后再禁用，点击不会出现下拉框
easyui combobox下拉框禁用,点击不会出现下拉框 需要做到,在给easyui combobox赋值后,再禁用easyui combobox 解决办法: $("#time-sele ...
- combogrid下拉方法封装
//html <input id="addxxxxx" name="xxxxxx" style="width:380px;height:36px ...
- easyui combotree下拉框多选赋值
发现jquery.easyui.min.js 1.3.4版本的用setValues给多选下拉框赋值不成功,只能用1.3.1版本的 Html代码: <input id="ProductL ...
- easyui combo下拉框多选框
按照自己的方式,先晒下效果图: 选一个值,那么就在input里面显示一个,去掉勾选,那么input就会少一个 其实做法很简单,今天就是快下班了,闲着没事加篇博客而已,下面带上代码. 1.页面的展示,i ...
- 第三方 XListview 上拉加载、下拉刷新、分页加载和Gson解析
注意:此Demo用的是第三方的Xlistview.jar,需要复制me文件夹到项目中,两个XML布局文件和一张图片 把下面的复制到String中 <string name="xlist ...
- easyui combobox下拉框文字超出宽度有横向滚轮
//下拉框显示横向滚轮 $(".combo").mouseenter(function(){ $(this).prev().combobox("showPanel&quo ...
- easyUI combobox下拉框很长，easyUI combobox下拉框如何显示滚动条的解决方法
如下图,combobox下拉框里内容很多时,会导致下拉框很长,很不美观. 如何使得combobox下拉框显示滚动条 方法:把属性panelHeight:"auto"注释掉即可. $ ...
随机推荐
- 课堂测试——jsp登录界面设计
实现结果:在login.jsp页面提交用户名和密码(可以验证是否为空),点击登录跳转到loginResult.jsp页面进行验证并显示结果 JSP + JDBC + MySQL login.jsp 设 ...
- [C++]环状序列(CircularSequence,ACM/ICPC Seoul 2004,UVa1584)
Question 例题3-5 环状序列(CircularSequence,ACM/ICPC Seoul 2004,UVa1584) 长度为n的环状串有n种表示方法,分别为从某个位置开始顺时针得到,在这 ...
- CF 1060E. Sergey and Subway
题目链接 题意:给你一棵树,然后连接两个有公共邻居的点,问你连完后,任意两点的距离之和. 一开始看这种题,还不怎么会做,借鉴了这位大佬的博客,get到了新技能,当我们求树上任意俩点的距离之时,可以转化 ...
- JMeter（三）遇到的问题01： 通过CSV Data Set Config参数化有中文时，显示为？
当使用CSV Data Set Config进行参数化,内容中含有中文时,响应文本显示为? 解决办法:只需要将“file encoding”设置为“gb2312”就可以了.
- 【Thymeleaf】浅谈Java模板引擎(带更新...)
什么是模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 为什么要用模板 ...
- MySql cmd下的学习笔记 —— 有关建立表的操作（有关于数据类型）
(01)建表的过程实际上是 声明字段 的过程 一. 列类型(字段): 存储同样的数据时,不同的列类型,所占据的空间和效率是不一样的,这就是建表时要考虑的意义. 二.MySQL三大列类型 数值型 ...
- mysql数据库卸载和安装
背景: 由于之前一个项目中用的数据库版本是免安装的mysql5.5.36,但是后来经过第三方测试公司测试出该数据库存在很多漏洞需要升级数据库才能解决.所以觉得将数据库更换为mysql-5.7.21-w ...
- sqoop导数据
1.添加oracle jdbc驱动 https://blog.csdn.net/eason_oracle/article/details/76836758 2.
- P3168 [CQOI2015]任务查询系统
题目地址:P3168 [CQOI2015]任务查询系统 主席树的模板题 更模板的在这儿:P3834 [模板]可持久化线段树 1(主席树) 形象的说,P3834是"单点修改,区间查询" ...
- Pytorch 细节记录
1. PyTorch进行训练和测试时指定实例化的model模式为:train/eval eg: class VAE(nn.Module): def __init__(self): super(VAE, ...