需求:
1、下拉框下拉时出现表格;
2、表格带分页功能;
3、可以使用向上键、向下键在表格中移动选择行数据;
4、可以使用回车键在表格中选中行数据;
5、在下拉框的文本框中输入内容,能查询表格;
6、下拉框的文本框的内容变化时,表格数据按分页设置显示
效果如下:
思路:
很简单,分拆为combo、datagrid、pagination三个组件分别操作,注意结合的操作就好。
在制作的过程中,比较头痛的是整合, 大体上代码中都加了注释,有些情况大家自己试一下就明白为什么要那样做了,
比如:在分页的页改变事件中要设置表格的pageSize,是为了在文本框变化时,能强制表格按分页的pageSize显示数据。
代码:
1、html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="style/js/easyui/themes/metro-green/easyui.css" rel="stylesheet" type="text/css" /> <link href="style/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="style/js/easyui/jquery.min.js" type="text/javascript"></script> <script src="style/js/easyui/jquery.easyui.min.js" type="text/javascript"></script> <script src="style/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script src="style/js/biz/comboGridBiz.js" type="text/javascript"></script> </head> <body> <h3>EasyUI ComboGrid 集成分页示例</h3> <div><input id="cg" style="width:150px" /><input type="text" id="txtGender" /></div> <input type="hidden" id="hdKeyword" /> </body> </html>
2、js代码
$(function () { $('#cg').combogrid({ panelWidth: 400, idField: 'PersonId', //ID字段 textField: 'PersonName', //显示的字段 url: "ashx/ComboGridHandler.ashx?action=search", fitColumns: true, striped: true, editable: true, pagination: true, //是否分页 rownumbers: true, //序号 collapsible: false, //是否可折叠的 fit: true, //自动大小 method: 'post', columns: [[ { field: 'PersonId', title: '用户编号', width: 80, hidden: true }, { field: 'PersonName', title: '用户名称', width: 150 }, { field: 'Gender', title: '用户性别', width: 150 } ]], keyHandler: { up: function () { //【向上键】押下处理 //取得选中行 var selected = $('#cg').combogrid('grid').datagrid('getSelected'); if (selected) { //取得选中行的rowIndex var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected); //向上移动到第一行为止 if (index > 0) { $('#cg').combogrid('grid').datagrid('selectRow', index - 1); } } else { var rows = $('#cg').combogrid('grid').datagrid('getRows'); $('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1); } }, down: function () { //【向下键】押下处理 //取得选中行 var selected = $('#cg').combogrid('grid').datagrid('getSelected'); if (selected) { //取得选中行的rowIndex var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected); //向下移动到当页最后一行为止 if (index < $('#cg').combogrid('grid').datagrid('getData').rows.length - 1) { $('#cg').combogrid('grid').datagrid('selectRow', index + 1); } } else { $('#cg').combogrid('grid').datagrid('selectRow', 0); } }, enter: function () { //【回车键】押下处理 //设置【性别】文本框的内容为选中行的的性别字段内容 $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender); //选中后让下拉表格消失 $('#cg').combogrid('hidePanel'); }, query: function (keyword) { //【动态搜索】处理 //设置查询参数 var queryParams = $('#cg').combogrid("grid").datagrid('options').queryParams; queryParams.keyword = keyword; $('#cg').combogrid("grid").datagrid('options').queryParams = queryParams; //重新加载 $('#cg').combogrid("grid").datagrid("reload"); $('#cg').combogrid("setValue", keyword); //将查询条件存入隐藏域 $('#hdKeyword').val(keyword); } }, onSelect: function () { //选中处理 $('#txtGender').val($('#cg').combogrid('grid').datagrid('getSelected').Gender); } }); //取得分页组件对象 var pager = $('#cg').combogrid('grid').datagrid('getPager'); if (pager) { $(pager).pagination({ pageSize: 10, //每页显示的记录条数,默认为10 pageList: [10, 5, 3], //可以设置每页记录条数的列表 beforePageText: '第', //页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录', //选择页的处理 onSelectPage: function (pageNumber, pageSize) { //按分页的设置取数据 getData(pageNumber, pageSize); //设置表格的pageSize属性,表格变化时按分页组件设置的pageSize显示数据 $('#cg').combogrid("grid").datagrid('options').pageSize = pageSize; //将隐藏域中存放的查询条件显示在combogrid的文本框中 $('#cg').combogrid("setValue", $('#hdKeyword').val()); $('#txtGender').val(''); }, //改变页显示条数的处理 //(处理后还是走onSelectPage事件,所以设置也写到onSelectPage事件中了) onChangePageSize: function () { }, //点击刷新的处理 onRefresh: function (pageNumber, pageSize) { //按分页的设置取数据 getData(pageNumber, pageSize); //将隐藏域中存放的查询条件显示在combogrid的文本框中 $('#cg').combogrid("setValue", $('#hdKeyword').val()); $('#txtGender').val(''); } }); } var getData = function (page, rows) { $.ajax({ type: "POST", url: "ashx/ComboGridHandler.ashx?action=search", data: "page=" + page + "&rows=" + rows + "&keyword=" + $('#hdKeyword').val(), error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); $.messager.progress('close'); }, success: function (data) { $('#cg').combogrid('grid').datagrid('loadData', data); } }); }; });
3、ashx代码
/// <summary> /// ComboGridHandler 的摘要说明 /// </summary> public class ComboGridHandler : IHttpHandler { /// <summary> /// /// </summary> /// <param name="context"></param> public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; string action = context.Request.Params["action"]; //页数 int PageNum = Convert.ToInt32(context.Request["page"]); //每一页多少条数据 int Record = Convert.ToInt32(context.Request["rows"]); //模拟数据 List<Person> list = MockData(); Dictionary<string, object> resultDic = new Dictionary<string, object>(); switch (action) { case "search": var condition = context.Request["keyword"] ?? string.Empty; List<Person> result = (from item in list where item.PersonName.Contains(condition) //条件查询 select item).ToList<Person>(); resultDic.Add("total", result.Count); resultDic.Add("rows", (result.Skip(Record * (PageNum - 1)).Take(Record)).ToList()); break; } JavaScriptSerializer serializer = new JavaScriptSerializer(); context.Response.Write(serializer.Serialize(resultDic)); } public bool IsReusable { get { return false; } } /// <summary> /// 模拟数据 /// </summary> /// <returns></returns> public List<Person> MockData() { List<Person> list = new List<Person>() { new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "叶宇", Gender = "女" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张兄家", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张洋", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "洪自军", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "王生杰", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "吴庆庆", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "武建昌", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘瑞", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张辽", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张颌", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘备", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘禅", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘表", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张震岳", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张学友", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张信哲", Gender = "男" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张悬", Gender = "女" }, new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张惠妹", Gender = "女" } }; return list; } }
4、实体类代码
[Serializable] public class Person { public string PersonId { get; set; } public string PersonName { get; set; } public string Gender { get; set; } }