jQuery EasyUI之DataGrid使用实例详解

jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。
jQuery EasyUI框架的官方主页,可以下载完整开发包，里面有示例代码可以参考。
运行效果图：

由于我使用的是ASP.NET webform技术，下面我就贴出主要的代码以供参考。
在页面中首先要引用相关的css以及js文件，这样才能使用该组件。
css部分：

<link href="../Js/jQueryEasyUI/theme/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../Js/jQueryEasyUI/theme/icon.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="../Css/datagrid.css" />

js部分：

<script src="../Js/jQueryEasyUI/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="../Js/jQueryEasyUI/jquery.easyui.min.js" type="text/javascript"></script> <script src="../Js/jQueryEasyUI/jquery.pagination.js" type="text/javascript"></script>

由于jQuery EasyUI基于jQuery，所以必需要先引入jQuery文件。而pagination.js是EasyUI的分页插件，后面会看到分页的效果。

<script type="text/javascript"> $（function （） {var qParams = { mode: "Query", hfjia: $（"#<%=hfjia.ClientID %>"）.val（）, sfz: $（"#sfz"）.val（） }; //取得查询参数var oldRowIndex;var opt = $（"#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）;}var selectRow = opt.datagrid（"getSelected"）;oldRowIndex = opt.datagrid（"getRowIndex", selectRow）; }, columns: [[{ title: "浏览档案", width: 20, align: "center", formatter: function （value, rowData, rowIndex） {return "<font onclick=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 （） {return true; }}）; }）; </script>

请注意这段长长的js代码，这是该页面的核心代码。里面的参数设置请注意，主要就是通过js动态的构造datagird。
该页面的Body部分：

<body><form id="form1" runat="server"><asp:HiddenField ID="hfjia" runat="server" /><div> <div class="form-wrapper cf" style="margin-top: 10px;"><div align="center" style="width: 780px;"> <input id="sfz" runat="server" type="text" placeholder="请扫描档案袋上面的条形码..." /> <button id="ssss">档案查询</button></div> </div> <div style="float: left; width: 780px; margin-top: -40px; margin-left: 10px;"><table id="grid"></table> </div> <div style="float: left; margin-top: 10px; margin-left: 10px;"><input type="button" value="返回主菜单" id="button1s" onclick="javascript: window.location.href = "../Main.aspx"" /> </div></div></form> </body>

其中id为grid的table部分，与上面的js部分中grid对应。
该页面的后台代码部分：

protected void Page_Load（object sender, EventArgs e） {string dagid = Request.QueryString["dagid"];hfjia.Value = dagid; }

很简单就是给前台存放的一个隐藏域赋值，以在页面刷新时保持状态（记录档案架的位置）。
后台的数据源地址为ServiceHanlder.ashx，看看这里面的详细代码。

namespace DAMIS.Pad2.Service {/// <summary>/// ServiceHanlder 的摘要说明/// </summary>public class ServiceHanlder : IHttpHandler{ public void ProcessRequest（HttpContext context） {if （！string.IsNullOrEmpty（context.Request["mode"]））{ if （context.Request["mode"].Equals（"Query"）） {if （！string.IsNullOrEmpty（context.Request["sfz"]））{ string sfz = context.Request["sfz"]; UserInfo userInfo = GetUserInfoById（sfz）;if （userInfo ！= null） {ReturnData rd = new ReturnData（）;rd.total = 1;rd.rows = new List<UserInfo>（） { userInfo }; DataContractJsonSerializer json = new DataContractJsonSerializer（rd.GetType（））;json.WriteObject（context.Response.OutputStream, rd）; } else {context.Response.Write（"<script>alert（"查无此人"）;</script>"）; }}else{ string hfjia = Regex.Match（context.Request["hfjia"].Split（";"）[0], @"d+"）.Value; string page = context.Request["page"]; string rows = context.Request["rows"];QueryData（hfjia, page, rows, context）;} }if （context.Request["mode"].Equals（"QueryInner"）） {string dajid = context.Request["dajid"].Trim（"""）;string dagid = context.Request["dagid"]; string hfjia = string.Join（"-", dajid, dagid）;string page = context.Request["page"];string rows = context.Request["rows"]; QueryData（hfjia, page, rows, context）; }} }#region 查询档案（分页） /// <summary> /// 查询档案（分页） /// </summary> /// <param name="hfjia">架号</param> /// <param name="page">页数</param> /// <param name="rows">行数</param> /// <param name="context"></param> public void QueryData（string hfjia, string page, string rows, HttpContext context） {List<UserInfo> list = new List<UserInfo>（）;string msg = string.Empty;DataTable dt = DAGCommonBLL.DAGPositionGetInformation（hfjia, out msg）; foreach （DataRow dr in dt.Rows）{ list.Add（new UserInfo（） {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（）; ReturnData rd = new ReturnData（）;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（）;DataContractJsonSerializer json = new DataContractJsonSerializer（rd.GetType（））;json.WriteObject（context.Response.OutputStream, rd）; } #endregion#region 通过身份证号获取用户基本信息 /// <summary> /// 通过身份证号获取用户基本信息 /// </summary> /// <param name="id">身份证号</param> /// <returns></returns> public static UserInfo GetUserInfoById（string id） {string hfjia = CommonBLL.GetUserPositionById（id）;string msg = string.Empty;if （！string.IsNullOrEmpty（hfjia））{ hfjia = hfjia.Split（"-"）[0] + "-" + hfjia.Split（"-"）[1]; DataTable dt = DAGCommonBLL.DAGPositionGetInformation（hfjia, out msg）; if （dt ！= null && dt.Rows.Count > 0） {DataRow dr = dt.Select（"personidnum = "" + id + """）.FirstOrDefault（）; UserInfo userInfo = new UserInfo（）{ 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（）,};return userInfo; }}return null; } #endregionpublic bool IsReusable {get{ return false;} }} }

这里面也没什么好说的，就是为前端页面提供数据。代码完全可以进一步精简、处理，这里就不修正了。
里面用到的一个实体类：

/// <summary> /// 分页返回数据 /// </summary> public class ReturnData {/// <summary>/// 数据总数/// </summary>public int total { get; set; } /// <summary>/// 具体数据/// </summary>public List<UserInfo> rows { get; set; } }

以上就是jQuery EasyUI之DataGrid使用实例简单介绍，希望对大家的学习有所帮助。