jQuery EasyUI之DataGrid使用示例
jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid。
jQuery EasyUI框架的官方主页:http://www.jeasyui.com/demo/main/index.php。可以下载完整开发包,里面有示例代码可以参考。
由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考。
在页面中首先要引用相关的css以及js文件,这样才能使用该组件。
css部分:
<linkhref="../Js/jQueryEasyUI/theme/default/easyui.css"rel="stylesheet"type="text/css"/><linkhref="../Js/jQueryEasyUI/theme/icon.css"rel="stylesheet"type="text/css"/><linkrel="stylesheet"type="text/css"href="../Css/datagrid.css"/>
js部分:
<scriptsrc="../Js/jQueryEasyUI/jquery-1.7.1.min.js"type="text/javascript"></script><scriptsrc="../Js/jQueryEasyUI/jquery.easyui.min.js"type="text/javascript"></script><scriptsrc="../Js/jQueryEasyUI/jquery.pagination.js"type="text/javascript"></script>
由于jQuery EasyUI基于jQuery,所以必需要先引入jQuery文件。而pagination.js是EasyUI的分页插件,后面会看到分页的效果。
<scripttype="text/javascript">$(function(){varqParams={mode:'Query',hfjia:$("#<%=hfjia.ClientID%>").val(),sfz:$("#sfz").val()};//取得查询参数varoldRowIndex;varopt=$("#grid");opt.datagrid({width:'780',height:'440',nowrap:false,striped:true,fitColumns:true,singleSelect:true,queryParams:qParams,//参数url:'../Service/ServiceHanlder.ashx',//idField:'id',//主索引//frozenColumns:[[{field:'ck',checkbox:true}]],pageSize:20,pageList:[20,25,30],pagination:true,//是否启用分页rownumbers:true,//是否显示列数onClickRow:function(rowIndex){if(oldRowIndex==rowIndex){opt.datagrid('clearSelections',oldRowIndex);}varselectRow=opt.datagrid('getSelected');oldRowIndex=opt.datagrid('getRowIndex',selectRow);},columns:[[{title:"浏览档案",width:20,align:"center",formatter:function(value,rowData,rowIndex){return"<fontonclick=searchDA('"+rowData.PersonIdNum+"');color='blue'>查看档案</font>";}},{field:'DAGInPosition',title:"档案位置",width:40,align:"center"},{field:'PersonIdNum',title:"***号",width:80,align:"center"},{field:'PersonName',title:"姓名",width:40,align:"center"},{field:'PersonSex',title:"性别",width:30,align:"center"},{field:'DAId',title:"档案编号",width:60,align:"center"}//{field:'DAGInOrg',title:"业务经办机构",width:60,align:"center"}]]}).datagrid("getPager").pagination({beforePageText:'第',//页数文本框前显示的汉字afterPageText:'页/{pages}页',displayMsg:'共{total}条记录',onBeforeRefresh:function(){returntrue;}});});</script>
请注意这段长长的js代码,这是该页面的核心代码。里面的参数设置请注意,主要就是通过js动态的构造datagird。
该页面的Body部分:
<body><formid="form1"runat="server"><asp:HiddenFieldID="hfjia"runat="server"/><div><divclass="form-wrappercf"><divalign="center"><inputid="sfz"runat="server"type="text"placeholder="请扫描档案袋上面的条形码..."/><buttonid="ssss">档案查询</button></div></div><div><tableid="grid"></table></div><div><inputtype="button"value="返回主菜单"id="button1s"onclick="javascript:window.location.href='../Main.aspx'"/></div></div></form></body>
其中id为grid的table部分,与上面的js部分中grid对应。
该页面的后台代码部分:
protectedvoidPage_Load(objectsender,EventArgse){stringdagid=Request.QueryString["dagid"];hfjia.Value=dagid;}
很简单就是给前台存放的一个隐藏域赋值,以在页面刷新时保持状态(记录档案架的位置)。
后台的数据源地址为ServiceHanlder.ashx,看看这里面的详细代码。
namespaceDAMIS.Pad2.Service{///<summary>///ServiceHanlder的摘要说明///</summary>publicclassServiceHanlder:IHttpHandler{publicvoidProce***equest(HttpContextcontext){if(!string.IsNullOrEmpty(context.Request["mode"])){if(context.Request["mode"].Equals("Query")){if(!string.IsNullOrEmpty(context.Request["sfz"])){stringsfz=context.Request["sfz"];UserInfouserInfo=GetUserInfoById(sfz);if(userInfo!=null){ReturnDatard=newReturnData();rd.total=1;rd.rows=newList<UserInfo>(){userInfo};DataContractJsonSerializerjson=newDataContractJsonSerializer(rd.GetType());json.WriteObject(context.Response.OutputStream,rd);}else{context.Response.Write("<script>alert('查无此人');</script>");}}else{stringhfjia=Regex.Match(context.Request["hfjia"].Split(';')[0],@"\d+").Value;stringpage=context.Request["page"];stringrows=context.Request["rows"];QueryData(hfjia,page,rows,context);}}if(context.Request["mode"].Equals("QueryInner")){stringdajid=context.Request["dajid"].Trim('\'');stringdagid=context.Request["dagid"];stringhfjia=string.Join("-",dajid,dagid);stringpage=context.Request["page"];stringrows=context.Request["rows"];QueryData(hfjia,page,rows,context);}}}#region查询档案(分页)///<summary>///查询档案(分页)///</summary>///<paramname="hfjia">架号</param>///<paramname="page">页数</param>///<paramname="rows">行数</param>///<paramname="context"></param>publicvoidQueryData(stringhfjia,stringpage,stringrows,HttpContextcontext){List<UserInfo>list=newList<UserInfo>();stringmsg=string.Empty;DataTabledt=DAGCommonBLL.DAGPositionGetInformation(hfjia,outmsg);foreach(DataRowdrindt.Rows){list.Add(newUserInfo(){PersonIdNum=dr["PersonIdNum"].ToString(),PersonName=dr["PersonName"].ToString(),PersonSex=dr["PersonSex"].ToString(),DAId=dr["DAId"].ToString(),DABusKindName=dr["DABusKindName"].ToString(),DAKindName=dr["DAKindName"].ToString(),DALevelCodeName=dr["DALevelCodeName"].ToString(),DAGInPosition=dr["DAGInPosition"].ToString(),DAGInUserId=dr["DAGInUserId"].ToString(),DAGInOrg=dr["DAGInOrg"].ToString(),IsValid=dr["IsValid"].ToString(),});}list=list.OrderBy(x=>x.DAGInPosition).ToList();ReturnDatard=newReturnData();rd.total=dt.Rows.Count;rd.rows=list.Where(x=>x.IsValid=="0").Skip(Convert.ToInt32(rows)*(Convert.ToInt32(page)-1)).Take(Convert.ToInt32(rows)).ToList();DataContractJsonSerializerjson=newDataContractJsonSerializer(rd.GetType());json.WriteObject(context.Response.OutputStream,rd);}#endregion#region通过***号获取用户基本信息///<summary>///通过***号获取用户基本信息///</summary>///<paramname="id">***号</param>///<returns></returns>publicstaticUserInfoGetUserInfoById(stringid){stringhfjia=CommonBLL.GetUserPositionById(id);stringmsg=string.Empty;if(!string.IsNullOrEmpty(hfjia)){hfjia=hfjia.Split('-')[0]+"-"+hfjia.Split('-')[1];DataTabledt=DAGCommonBLL.DAGPositionGetInformation(hfjia,outmsg);if(dt!=null&&dt.Rows.Count>0){DataRowdr=dt.Select("personidnum='"+id+"'").FirstOrDefault();UserInfouserInfo=newUserInfo(){PersonIdNum=dr["PersonIdNum"].ToString(),PersonName=dr["PersonName"].ToString(),PersonSex=dr["PersonSex"].ToString(),DAId=dr["DAId"].ToString(),DABusKindName=dr["DABusKindName"].ToString(),DAKindName=dr["DAKindName"].ToString(),DALevelCodeName=dr["DALevelCodeName"].ToString(),DAGInPosition=dr["DAGInPosition"].ToString(),DAGInUserId=dr["DAGInUserId"].ToString(),DAGInOrg=dr["DAGInOrg"].ToString(),IsValid=dr["IsValid"].ToString(),};returnuserInfo;}}returnnull;}#endregionpublicboolIsReusable{get{returnfalse;}}}}
这里面也没什么好说的,就是为前端页面提供数据。代码完全可以进一步精简、处理,这里就不修正了。
里面用到的一个实体类:
///<summary>///分页返回数据///</summary>publicclassReturnData{///<summary>///数据总数///</summary>publicinttotal{get;set;}///<summary>///具体数据///</summary>publicList<UserInfo>rows{get;set;}}
最终的效果图:
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。