jqueryeasyuicombogrid集成分页按键示例.docx
《jqueryeasyuicombogrid集成分页按键示例.docx》由会员分享，可在线阅读，更多相关《jqueryeasyuicombogrid集成分页按键示例.docx（5页珍藏版）》请在冰豆网上搜索。
jqueryeasyuicombogrid集成分页按键示例
jQueryEasyUIComboGrid集成分页、按键示例
需求：
1、下拉框下拉时出现表格；
2、表格带分页功能；
3、可以使用向上键、向下键在表格中移动选择行数据；
4、可以使用回车键在表格中选中行数据；
5、在下拉框的文本框中输入内容，能查询表格；
6、下拉框的文本框的内容变化时，表格数据按分页设置显示
效果如下：
图1、
图2、
图3、
图4、
思路：
很简单，分拆为combo、datagrid、pagination三个组件分别操作，注意结合的操作就好。
在制作的过程中，比较头痛的是整合，大体上代码中都加了注释，有些情况大家自己试一下就明白为什么要那样做了，
比如：
在分页的页改变事件中要设置表格的pageSize，是为了在文本框变化时，能强制表格按分页的pageSize显示数据。
代码：
1、html代码
[html]viewplaincopy<!
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http:
//www.w3.org/1999/xhtml"><head><title></title><linkrel="externalnofollow"href="style/js/easyui/themes/metro-green/easyui.css"rel="stylesheet"type="text/css"/><linkrel="externalnofollow"href="style/js/easyui/themes/icon.css"rel="stylesheet"type="text/css"/><scriptsrc="style/js/easyui/jquery.min.js"type="text/javascript"></script><scriptsrc="style/js/easyui/jquery.easyui.min.js"type="text/javascript"></script><scriptsrc="style/js/easyui/locale/easyui-lang-zh_CN.js"type="text/javascript"></script><scriptsrc="style/js/biz/comboGridBiz.js"type="text/javascript"></script></head><body><h3>EasyUIComboGrid集成分页示例</h3><div><inputid="cg"style="width:
150px"/><inputtype="text"id="txtGender"/></div><inputtype="hidden"id="hdKeyword"/></body></html>2、js代码
[javascript]viewplaincopy$（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（）{//【向上键】押下处理//取得选中行varselected=$（'#cg'）.combogrid（'grid'）.datagrid（'getSelected'）;if（selected）{//取得选中行的rowIndexvarindex=$（'#cg'）.combogrid（'grid'）.datagrid（'getRowIndex',selected）;//向上移动到第一行为止if（index>0）{$（'#cg'）.combogrid（'grid'）.datagrid（'selectRow',index-1）;}}else{varrows=$（'#cg'）.combogrid（'grid'）.datagrid（'getRows'）;$（'#cg'）.combogrid（'grid'）.datagrid（'selectRow',rows.length-1）;}},down:
function（）{//【向下键】押下处理//取得选中行varselected=$（'#cg'）.combogrid（'grid'）.datagrid（'getSelected'）;if（selected）{//取得选中行的rowIndexvarindex=$（'#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）{//【动态搜索】处理//设置查询参数varqueryParams=$（'#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）;}}）;//取得分页组件对象varpager=$（'#cg'）.combogrid（'grid'）.datagrid（'getPager'）;if（pager）{$（pager）.pagination（{pageSize:
10,//每页显示的记录条数，默认为10pageList:
[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（''）;}}）;}vargetData=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代码
[csharp]viewplaincopy///<summary>///ComboGridHandler的摘要说明///</summary>publicclassComboGridHandler:
IHttpHandler{///<summary>//////</summary>///<paramname="context"></param>publicvoidProcessRequest（HttpContextcontext）{context.Response.ContentType="application/json";stringaction=context.Request.Params["action"];//页数intPageNum=Convert.ToInt32（context.Request["page"]）;//每一页多少条数据intRecord=Convert.ToInt32（context.Request["rows"]）;//模拟数据List<Person>list=MockData（）;Dictionary<string,object>resultDic=newDictionary<string,object>（）;switch（action）{case"search":
varcondition=context.Request["keyword"]?
?
string.Empty;List<Person>result=（fromiteminlistwhereitem.PersonName.Contains（condition）//条件查询selectitem）.ToList<Person>（）;resultDic.Add（"total",result.Count）;resultDic.Add（"rows",（result.Skip（Record*（PageNum-1））.Take（Record））.ToList（））;break;}JavaScriptSerializerserializer=newJavaScriptSerializer（）;context.Response.Write（serializer.Serialize（resultDic））;}publicboolIsReusable{get{returnfalse;}}///<summary>///模拟数据///</summary>///<returns></returns>publicList<Person>MockData（）{List<Person>list=newList<Person>（）{newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="叶宇",Gender="女"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="张兄家",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="张洋",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="洪自军",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="王生杰",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="吴庆庆",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="武建昌",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="刘瑞",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="张辽",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="张颌",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="刘备",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="刘禅",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="刘表",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="张震岳",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="张学友",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="张信哲",Gender="男"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="张悬",Gender="女"},newPerson（）{PersonId=Guid.NewGuid（）.ToString（）,PersonName="张惠妹",Gender="女"}};returnlist;}}
4、实体类代码[csharp]viewplaincopy[Serializable]publicclassPerson{publicstringPersonId{get;set;}publicstringPersonName{get;set;}publicstringGender{get;set;}}——————————————————————————
抛砖完毕，还请聪明的你给出更好更漂亮的解决方案哦
且做且珍惜
附件：
完整代码下载转载自：
升级会员 