jqueryeasyuicombogrid集成分按键示例_第1页
jqueryeasyuicombogrid集成分按键示例_第2页
jqueryeasyuicombogrid集成分按键示例_第3页
jqueryeasyuicombogrid集成分按键示例_第4页
jqueryeasyuicombogrid集成分按键示例_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、jQuery EasyUI ComboGrid 集成分页、按键示例 需求：1、下拉框下拉时出现表格；2、表格带分页功能；3、可以使用向上键、向下键在表格中移动选择行数据；4、可以使用回车键在表格中选中行数据；5、在下拉框的文本框中输入内容，能查询表格；6、下拉框的文本框的内容变化时，表格数据按分页设置显 示效果如下：图 1 、思路：很简单，分拆为 combo 、 datagrid 、 pagination 三个组件分 别操作，注意结合的操作就好。在制作的过程中，比较头痛的是整合， 大体上代码中都加 了注释，有些情况大家自己试一下就明白为什么要那样做了，比如：在分页的页改变事件中要设置表格的 p

2、ageSize ，是为 了在文本框变化时，能强制表格按分页的 pageSize 显示数 据。代码：1、 html 代码html view plaincopy<!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN /TR/xhtml1/DTD/xhtml1-transitional.dtd > <html xmlns=/1999/xhtml><head> <title></title> <link rel=e

3、xternal nofollowhref=style/js/easyui/themes/metro-green/easyui.cssrel=stylesheet type=text/css /> rel=external nofollow<linkhref=style/js/easyui/themes/icon.css rel=stylesheet type=text/css /> <script src=style/js/easyui/jquery.min.jstype=text/javascript></script>src=style/js/ea

4、syui/jquery.easyui.min.js<scripttype=text/javascript></script><scriptsrc=style/js/easyui/locale/easyui-lang-zh_CN.jstype=text/javascript></script><scriptsrc=style/js/biz/comboGridBiz.js</head>type=text/javascript></script><body> <h3>EasyUI ComboG

5、rid 集成分页 示例 </h3><div><input id=cgstyle=width:150px /><input type=text id=txtGender /></div><inputtype=hidden id=hdKeyword /></body></html> 2、 js 代码javascript view plaincopy$(function () $(#cg).combogrid(panelWidth: 400,idField: PersonId,/ID 字段textFiel

6、d: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: 用户名称

7、, width: 150 , field: Gender, title: 用户性别 , width:150 押下处理 var selected =,keyHandler:up: function () /【向上键】/取得选中行$(#cg).combogrid(grid).datagrid(getSelected); if (selected) / 取得选中行的rowIndex var index =$(#cg).combogrid(grid).datagrid(getRowIndex, selected); /向上移动到第一行为止if (index> 0) $(#cg).combogri

8、d(grid).dat agrid(selectRow, index -1); elsevar 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) / 取得选中行的rowIndexvar index =$(#cg).c

9、ombogrid(grid).datagrid(getRowIndex, selected); /向下移动到当页最后一行为止if (index <1)agrid(selectRow, index +1); d(selectRow, 0); enter: function () $(#cg).combogrid(grid).datagrid(getData).rows.length -$(#cg).combogrid(grid).dat else $(#cg).combogrid(grid).datagri ,/【回车键】押下处理/设置【性别】文本框的内容为选中行的的性别字段内容$(#tx

10、tGender).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).queryPara

11、ms= queryParams;/重新加载$(#cg).combogrid(grid).datagrid(reload); $(#cg).combogrid(setValue, keyword); /将查询条件存入隐藏域$(#hdKeyword).val(keyword); ,onSelect: function () / 选中处理$(#txtGender).val($(#cg).combogrid(grid).datagrid(getS elected).Gender); );/ 取得分页组件对象 var pager = $(#cg).combogrid(grid).datagrid(get

12、Pager); if (pager) $(pager).pagination( pageSize:10, /每页显示的记录条数，默认为 10 pageList: 10, 5, 3,/可以设置每页记录条数的列表beforePageText: 第 , /页数文本框前显示的汉字 afterPageText: 页 共 pages 页 , displayMsg: 当前显示 from - to 条记录 共 total 条 记录 ,/选择页的处理onSelectPage: function (pageNumber, pageSize) / 按分页的设置取数据getData(pageNumber, pageS

13、ize);/ 设置表格的 pageSize 属性，表格变化时按分页组件设置的pageSize 显示数据 $(#cg).combogrid(grid).datagrid(options).pageSize = pageSize; / 将隐藏域中存放的查询条 件显示在 combogrid 的文本框中$(#cg).combogrid(setValue, $(#hdKeyword).val(); $(#txtGender).val(); ,/ 改变页显示条数的处理/(处理后还是走onSelectPage 事件，所以设置也写到 onSelectPage 事件中 了)onChangePageSize: f

14、unction () ,/点击刷新的处理 (pageNumber, pageSize) 设置取数据 pageSize);onRefresh: function/按分页的 getData(pageNumber, /将隐藏域中存放的查询条件显示在 combogrid 的文本框中$(#cg).combogrid(setValue, $(#hdKeyword).val();$(#txtGender).val(); ); var getData = function (page, rows) $.ajax(type: POST,url: ashx/ComboGridHandler.ashx?action

15、=search, data: page= + page + &rows= + rows +&keyword= + $(#hdKeyword).val(),error: function (XMLHttpRequest, textStatus, errorThrown) alert(textStatus);$.gress(close); , success: function (data) $(#cg).combogrid(grid).datagrid(lo adData, data); ); ;3、 ashx 代码csharp view plaincop

16、y/ <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 =conte

17、xt.Request.Paramsaction;/ 页数int PageNum = Convert.ToInt32(context.Requestpage); /每一页多少条数据int Record =Convert.ToInt32(context.Requestrows);模拟数据 List<Person> list = MockData(););/switchDictionary<string, object> resultDic = new Dictionary<string, object>();(action) case search:var co

18、ndition = context.Requestkeyword ?string.Empty; List<Person> result = (from item in listwhereitem.PersonName.Contains(condition)/ 条件查询select item).ToList<Person>();resultDic.Add(total, result.Count);resultDic.Add(rows, (result.Skip(Record * (PageNum -1).Take(Record).ToList();break; JavaS

19、criptSerializer 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 = newList

20、<Person>() newPerson() 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().T

21、oString(), 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 Pers

22、on() 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(), Per

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论