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"注释掉即可. $ ...
随机推荐
- 利用PHP访问数据库——实现分页功能与多条件查询功能
1.实现分页功能 <body><table width="100%" border="1"> <thead> < ...
- VS中ipch文件夹和sdf文件的处理方式
ipch文件夹和sdf是VS产生的预编译头文件和智能提示信息,对编码没有影响,可存放在固定的位置,定期进行清理
- Access数据库SQL注入(Access SQL Injection)
一.Microsoft Office Access数据库手工注入语句 1.参数后面加 ’ .and 1=1.and 1=2看返回状态判断是否存在注入点 2.参数后面加 and exists(sel ...
- Maven多模块项目管理小结
原文地址:http://blog.csdn.net/whuslei/article/details/7989102 题记 最近刚完成一个用Maven构建的Web项目,看了一些Maven方面的书,比如& ...
- Pickup Objective Actor
在角色的头文件中,添加一个布尔变量,设为共有状态,用来判断是否携带目标物体,并暴露给蓝图,类型为仅蓝图可读 UPROPERTY(BlueprintReadOnly,Category="Gam ...
- ClassNotFoundException和NoClassDeFoundError
ClassNotFoundException:反射时(类加载时)类名写错了(属于可捕获的异常) NoClassDeFoundError:编译时依赖的类(jar包)在运行环境机器中不存在(属于无法处理的 ...
- learn
1.JQ (随时) 2.微信小程序(关注群,专栏知乎,自己申请一个小程序弄个实战) 3.支付宝小程序(2017.08.18 新生代 类似微信api) 4.vue(优秀的mvvm框架,手机端主流) 5. ...
- layer兼容性问题
一.Layer 弹出层在ie8错乱的解决办法 弹出层在火狐.谷歌.360极速模式.IE6下都能100%面积正常显示,但在IE8和360的兼容模式下只显示弹出层下半部分或右半部分的内容,在主页面加上: ...
- 引入第三方SDK allowBackup value不一致引起的编译异常
项目中要引入一个客服的SDK,项目中 <application android:name=".AppApplication" android:allowBackup=&quo ...
- C# 如何进行图像的压缩
从网上找的非常有效.图片3M到500k private static ImageCodecInfo GetEncoderInfo(String mimeType) { int j; ImageCode ...