jQuery EasyUI之DataGrid使用示例

2025-01-02 技术教程

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部分：

其中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;}}

最终的效果图：