1、下拉框下拉时出现表格；
2、表格带分页功能；
3、可以使用向上键、向下键在表格中移动选择行数据；
4、可以使用回车键在表格中选中行数据；
5、在下拉框的文本框中输入内容，能查询表格；
6、下拉框的文本框的内容变化时，表格数据按分页设置显示
效果如下：
【C#|EasyUI ComboGrid集成分页按键示例】图1、
文章图片
图2、
文章图片
图3、
文章图片
图4、
文章图片
思路：
很简单，分拆为combo、datagrid、pagination三个组件分别操作，注意结合的操作就好。
在制作的过程中，比较头痛的是整合， 大体上代码中都加了注释，有些情况大家自己试一下就明白为什么要那样做了，
比如：在分页的页改变事件中要设置表格的pageSize，是为了在文本框变化时，能强制表格按分页的pageSize显示数据。
代码：
1、html代码
文章图片
文章图片
view source print ? 01.
'-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> 02.
'http://www.w3.org/1999/xhtml'> 03.
04.
05.
'style/js/easyui/themes/metro-green/easyui.css' rel='stylesheet' type='text/css' /> 06.
'style/js/easyui/themes/icon.css' rel='stylesheet' type='text/css' /> 07.
08.
09.
10.
11.
12.
13.
EasyUI ComboGrid 集成分页示例
14.
'cg' style='width:150px' />'text' id='txtGender' /> 15.
'hidden' id='hdKeyword' /> 16.
17.
2、js代码
文章图片
文章图片
view source print ? 001.
1 $(function () { 002.
2$('#cg').combogrid({ 003.
3panelWidth: 400, 004.
4idField: 'PersonId',//ID字段 005.
5textField: 'PersonName',//显示的字段 006.
6url: 'ashx/ComboGridHandler.ashx?action=search', 007.
7fitColumns: true, 008.
8striped: true, 009.
9editable: true, 010.
10pagination: true,//是否分页 011.
11rownumbers: true,//序号 012.
12collapsible: false,//是否可折叠的 013.
13fit: true,//自动大小 014.
14method: 'post', 015.
15columns: [[ 016.
16{ field: 'PersonId', title: '用户编号', width: 80, hidden: true }, 017.
17{ field: 'PersonName', title: '用户名称', width: 150 }, 018.
18{ field: 'Gender', title: '用户性别', width: 150 } 019.
19]], 020.
20keyHandler: { 021.
21up: function () {//【向上键】押下处理 022.
22//取得选中行 023.
23var selected = $('#cg').combogrid('grid').datagrid('getSelected');
024.
24if (selected) { 025.
25//取得选中行的rowIndex 026.
26var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
027.
27//向上移动到第一行为止 028.
28if (index > 0) { 029.
29$('#cg').combogrid('grid').datagrid('selectRow', index - 1);
030.
30} 031.
31} else { 032.
32var rows = $('#cg').combogrid('grid').datagrid('getRows');
033.
33$('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1);
034.
34} 035.
35}, 036.
36down: function () {//【向下键】押下处理 037.
37//取得选中行 038.
38var selected = $('#cg').combogrid('grid').datagrid('getSelected');
039.
39if (selected) { 040.
40//取得选中行的rowIndex 041.
41var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
042.
42//向下移动到当页最后一行为止 043.
43if (index < $('#cg').combogrid('grid').datagrid('getData').rows.length - 1) { 044.
44$('#cg').combogrid('grid').datagrid('selectRow', index + 1);
045.
45} 046.
46} else { 047.
47$('#cg').combogrid('grid').datagrid('selectRow', 0);
048.
48} 049.
49}, 050.
50enter: function () {//【回车键】押下处理 051.
51//设置【性别】文本框的内容为选中行的的性别字段内容 052.
52$('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
053.
53//选中后让下拉表格消失 054.
54$('#cg').combogrid('hidePanel');
055.
55}, 056.
56query: function (keyclass=keylink href=https://www.it610.com/article/"http://www.it165.net/edu/ebg/" target=_blank>word) {//【动态搜索】处理 057.
57//设置查询参数 058.
58var queryParams = $('#cg').combogrid('grid').datagrid('options').queryParams;
059.
59queryParams.keyword = keyword;
060.
60$('#cg').combogrid('grid').datagrid('options').queryParams = queryParams;
061.
61//重新加载 062.
62$('#cg').combogrid('grid').datagrid('reload');
063.
63064.
64$('#cg').combogrid('setValue', keyword);
065.
65//将查询条件存入隐藏域 066.
66$('#hdKeyword').val(keyword);
067.
67} 068.
68}, 069.
69onSelect: function () {//选中处理 070.
70$('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender);
071.
71} 072.
72});
073.
73074.
74//取得分页组件对象 075.
75var pager = $('#cg').combogrid('grid').datagrid('getPager');
076.
76077.
77if (pager) { 078.
78$(pager).pagination({ 079.
79pageSize: 10,//每页显示的记录条数，默认为10 080.
80pageList: [10, 5, 3],//可以设置每页记录条数的列表 081.
81beforePageText: '第',//页数文本框前显示的汉字 082.
82afterPageText: '页共 {pages} 页', 083.
83displayMsg: '当前显示 {from} - {to} 条记录共 {total} 条记录', 084.
84//选择页的处理 085.
85onSelectPage: function (pageNumber, pageSize) { 086.
86//按分页的设置取数据 087.
87getData(pageNumber, pageSize);
088.
88//设置表格的pageSize属性，表格变化时按分页组件设置的pageSize显示数据 089.
89$('#cg').combogrid('grid').datagrid('options').pageSize = pageSize;
090.
90//将隐藏域中存放的查询条件显示在combogrid的文本框中 091.
91$('#cg').combogrid('setValue', $('#hdKeyword').val());
092.
92$('#txtGender').val('');
093.
93}, 094.
94//改变页显示条数的处理 095.
95//（处理后还是走onSelectPage事件，所以设置也写到onSelectPage事件中了） 096.
96onChangePageSize: function () { }, 097.
97//点击刷新的处理 098.
98onRefresh: function (pageNumber, pageSize) { 099.
99//按分页的设置取数据 100.
100getData(pageNumber, pageSize);
101.
101//将隐藏域中存放的查询条件显示在combogrid的文本框中 102.
102$('#cg').combogrid('setValue', $('#hdKeyword').val());
103.
103$('#txtGender').val('');
104.
104} 105.
105});
106.
106} 107.
107108.
108var getData = https://www.it610.com/article/function (page, rows) { 109.
109$.ajax({ 110.
110type: 'POST', 111.
111url: 'ashx/ComboGridHandler.ashx?action=search', 112.
112data: 'page=' + page + '&rows=' + rows + '&keyword=' + $('#hdKeyword').val(), 113.
113error: function (XMLHttpRequest, textStatus, errorThrown) { 114.
114alert(textStatus);
115.
115$.messager.progress('close');
116.
116}, 117.
117success: function (data) { 118.
118$('#cg').combogrid('grid').datagrid('loadData', data);
119.
119} 120.
120});
121.
121};
122.
122 });
3、ashx代码
文章图片
文章图片
view source print ? 01.
1 /// 02.
2 /// ComboGridHandler 的摘要说明 03.
3 /// 04.
4 public class ComboGridHandler : IHttpHandler 05.
5 { 06.
6 /// 07.
7 /// 08.
8 /// 09.
9 /// 10.
10 public void ProcessRequest(HttpContext context) 11.
11 { 12.
12context.Response.ContentType = 'application/json';
13.
13string action = context.Request.Params['action'];
14.
1415.
15//页数 16.
16int PageNum = Convert.ToInt32(context.Request['page']);
17.
17//每一页多少条数据 18.
18int Record = Convert.ToInt32(context.Request['rows']);
19.
1920.
20//模拟数据 21.
21List list = MockData();
22.
2223.
23Dictionary resultDic = new Dictionary();
24.
2425.
25switch (action) 26.
26{ 27.
27case 'search': 28.
2829.
29var condition = context.Request['keyword'] ?? string.Empty;
30.
3031.
31List result = (from item in list 32.
32where item.PersonName.Contains(condition)//条件查询 33.
33select item).ToList();
34.
3435.
35resultDic.Add('total', result.Count);
36.
36resultDic.Add('rows', (result.Skip(Record * (PageNum - 1)).Take(Record)).ToList());
37.
3738.
38break;
39.
39} 40.
4041.
41JavaScriptSerializer serializer = new JavaScriptSerializer();
42.
4243.
43context.Response.Write(serializer.Serialize(resultDic));
44.
44 } 45.
4546.
46 public bool IsReusable 47.
47 { 48.
48get 49.
49{ 50.
50return false;
51.
51} 52.
52 } 53.
5354.
54 /// 55.
55 /// 模拟数据 56.
56 /// 57.
57 /// 58.
58 public List MockData() 59.
59 { 60.
60List list = new List() { 61.
61new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '叶宇', Gender = '女' }, 62.
62new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张兄家', Gender = '男' }, 63.
63new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张洋', Gender = '男' }, 64.
64new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '洪自军', Gender = '男' }, 65.
65new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '王生杰', Gender = '男' }, 66.
66new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '吴庆庆', Gender = '男' }, 67.
67new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '武建昌', Gender = '男' }, 68.
68new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '刘瑞', Gender = '男' }, 69.
69new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张辽', Gender = '男' }, 70.
70new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张颌', Gender = '男' }, 71.
71new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '刘备', Gender = '男' }, 72.
72new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '刘禅', Gender = '男' }, 73.
73new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '刘表', Gender = '男' }, 74.
74new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张震岳', Gender = '男' }, 75.
75new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张学友', Gender = '男' }, 76.
76new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张信哲', Gender = '男' }, 77.
77new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张悬', Gender = '女' }, 78.
78new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = '张惠妹', Gender = '女' } 79.
79};
80.
8081.
81return list;
82.
82 }
4、实体类代码
文章图片
文章图片
view source print ? 01.
1 [Serializable] 02.
2 public class Person 03.
3 { 04.
4public string PersonId { get;
set;
} 05.
506.
6public string PersonName { get;
set;
} 07.
708.
8public string Gender { get;
set;
} 09.
9 }
------------------------------------------------------------------------------
抛砖完毕，还请聪明的你给出更好更漂亮的解决方案哦
且做且珍惜
附件：完整代码下载 http://www.it165.net/uploadfile/files/2014/0402/EasyUIDemo.zip
推荐阅读
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- C#|C# 文件路径操作
- C# 接口实例
- C#|10、接口、抽象、密封、开放封闭原则
- c#|11、C#处理程序异常的技术
- C#|九、C#结构 类 属性