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"注释掉即可. $ ...
随机推荐
- Linux LVM 逻辑分区
LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,它由Heinz Mauelshagen在Linux 2.4内核上实现.普通 ...
- ELK平台搭建（上）
一.目的 为指导在Centos6.8系统下搭建标准ELK平台的工作. 二.定义 Elasticsearch Logstash Kibana结合Redis协同工作. 三.适用范围 适用于运营维护组运维工 ...
- java 基础 字符类型
1.char类型的字面量可以是一个英文字母.字符或一个汉字,并且由单引号包括. 2.Java底层使用一个16位的整数来处理字符类型,该数值是一个字符的unicode编码值. unicode: 1.un ...
- 现代C++简单介绍
C++ 是世界上最常用的编程语言之一.编写良好的 C++ 程序是快速.高效的. 该语言比其他语言更加灵活,因为你可以使用它来创建各种应用,包括有趣刺激的游戏.高性能科学软件.设备驱动程序.嵌入式程序和 ...
- 关于each other terminal
LD_LIBRARY_PATH shouldn't contain the current directory I am trying to build a self-contain GLIBC 2. ...
- eureka ... is an unknown property 在 application.properties 中
问题如图 在application.properties中无法识别eureka 解决方式 (想了想这个好像是在某个依赖里面来的)发现 eureka 是在 某个依赖里面 所以添加了以下之后就解决了 ...
- MySQL报错解决方案：2013-Lost connection to MySQL server
今天上课的时候,在搭建完MySQL测试环境中出现的问题,整理如下: 问题描述:搭建完MySQL,用远程连接工具(Navicat)连接时报错: 2013-Lost connection to MySQL ...
- Netty实现简单UDP服务器
本文参考<Netty权威指南> 文件列表: ├── ChineseProverbClientHandler.java ├── ChineseProverbClient.java ├── C ...
- python3-面向对象进阶(内置方法)
面向对象进阶: isinstance和issubclass 反射 __setattr__,__getattr,__delattr__ __setitem__,__getitem,__delitem__ ...
- 检索每个字符串的子串（python散列表实现）
import re def get_str(i,num): str_list = re.findall(r'.{{{str_length}}}'.format(str_length=i), num) ...