jqueryeasyuicombogrid集成分页按键示例.docx
- 文档编号:25662719
- 上传时间:2023-06-11
- 格式:DOCX
- 页数:5
- 大小:16.94KB
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;}}——————————————————————————
抛砖完毕,还请聪明的你给出更好更漂亮的解决方案哦
且做且珍惜
附件:
完整代码下载转载自:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jqueryeasyuicombogrid 集成 分页 按键 示例