jQuery EasyUI之DataGrid使用示例

jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。

由于我使用的是ASP.NET webform技术，下面我就贴出主要的代码以供参考。

在页面中首先要引用相关的css以及js文件，这样才能使用该组件。

css部分：

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

<code> </code><code><link href=</code><code>"../Js/jQueryEasyUI/theme/icon.css"</code> <code>rel=</code><code>"stylesheet"</code> <code>type=</code><code>"text/css"</code> <code>/></code>

<code> </code><code><link rel=</code><code>"stylesheet"</code> <code>type=</code><code>"text/css"</code> <code>href=</code><code>"../Css/datagrid.css"</code> <code>/></code>

js部分：

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

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

<code><script src=</code><code>"../Js/jQueryEasyUI/jquery.pagination.js"</code> <code>type=</code><code>"text/javascript"</code><code>></script></code>

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

<code><script type=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>$(</code><code>function</code> <code>() {</code>

<code> </code><code>var</code> <code>qParams = { mode: </code><code>'Query'</code><code>, hfjia: $(</code><code>"#<%=hfjia.ClientID %>"</code><code>).val(), sfz: $(</code><code>"#sfz"</code><code>).val() }; </code><code>//取得查询参数</code>

<code> </code><code>var</code> <code>oldRowIndex;</code>

<code> </code><code>opt.datagrid({</code>

<code> </code><code>width: </code><code>'780'</code><code>,</code>

<code> </code><code>height: </code><code>'440'</code><code>,</code>

<code> </code><code>nowrap: </code><code>false</code><code>,</code>

<code> </code><code>striped: </code><code>true</code><code>,</code>

<code> </code><code>fitColumns: </code><code>true</code><code>,</code>

<code> </code><code>singleSelect: </code><code>true</code><code>,</code>

<code> </code><code>queryParams: qParams, </code><code>//参数</code>

<code> </code><code>url: </code><code>'../Service/ServiceHanlder.ashx'</code><code>,</code>

<code> </code><code>//idField: 'id', //主索引</code>

<code> </code><code>//frozenColumns: [[{ field: 'ck', checkbox: true}]], </code>

<code> </code><code>pageSize: 20,</code>

<code> </code><code>pageList: [20, 25, 30],</code>

<code> </code><code>pagination: </code><code>true</code><code>, </code><code>//是否启用分页</code>

<code> </code><code>rownumbers: </code><code>true</code><code>, </code><code>//是否显示列数</code>

<code> </code><code>onClickRow: </code><code>function</code> <code>(rowIndex) {</code>

<code> </code><code>if</code> <code>(oldRowIndex == rowIndex) {</code>

<code> </code><code>opt.datagrid(</code><code>'clearSelections'</code><code>, oldRowIndex);</code>

<code> </code><code>var</code> <code>selectRow = opt.datagrid(</code><code>'getSelected'</code><code>);</code>

<code> </code><code>oldRowIndex = opt.datagrid(</code><code>'getRowIndex'</code><code>, selectRow);</code>

<code> </code><code>columns: [[</code>

<code> </code><code>title: </code><code>"浏览档案"</code><code>, width: 20, align: </code><code>"center"</code><code>, formatter: </code><code>function</code> <code>(value, rowData, rowIndex) {</code>

<code> </code><code>return</code> <code>"<font onclick=searchDA('"</code> <code>+ rowData.PersonIdNum + </code><code>"'); color='blue' > 查看档案 </font>"</code><code>;</code>

<code> </code><code>{ field: </code><code>'DAGInPosition'</code><code>, title: </code><code>"档案位置"</code><code>, width: 40, align: </code><code>"center"</code> <code>},</code>

<code> </code><code>{ field: </code><code>'PersonIdNum'</code><code>, title: </code><code>"***号"</code><code>, width: 80, align: </code><code>"center"</code> <code>},</code>

<code> </code><code>{ field: </code><code>'PersonName'</code><code>, title: </code><code>"姓名"</code><code>, width: 40, align: </code><code>"center"</code> <code>},</code>

<code> </code><code>{ field: </code><code>'PersonSex'</code><code>, title: </code><code>"性别"</code><code>, width: 30, align: </code><code>"center"</code> <code>},</code>

<code> </code><code>{ field: </code><code>'DAId'</code><code>, title: </code><code>"档案编号"</code><code>, width: 60, align: </code><code>"center"</code> <code>}</code>

<code> </code><code>// { field: 'DAGInOrg', title: "业务经办机构", width: 60, align: "center" }</code>

<code> </code><code>}).datagrid(</code><code>"getPager"</code><code>).pagination({</code>

<code> </code><code>beforePageText: </code><code>'第'</code><code>, </code><code>//页数文本框前显示的汉字 </code>

<code> </code><code>afterPageText: </code><code>'页/{pages}页'</code><code>,</code>

<code> </code><code>displayMsg: </code><code>'共{total}条记录'</code><code>,</code>

<code> </code><code>onBeforeRefresh: </code><code>function</code> <code>() {</code>

<code> </code><code>return</code> <code>true</code><code>;</code>

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

该页面的Body部分：

<code> </code><code><</code><code>form</code> <code>id</code><code>=</code><code>"form1"</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>

<code> </code><code><</code><code>asp:HiddenField</code> <code>ID</code><code>=</code><code>"hfjia"</code> <code>runat</code><code>=</code><code>"server"</code> <code>/></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-wrapper cf"</code> <code>style</code><code>=</code><code>"margin-top: 10px;"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>align</code><code>=</code><code>"center"</code> <code>style</code><code>=</code><code>"width: 780px;"</code><code>></code>

<code> </code><code><</code><code>input</code> <code>id</code><code>=</code><code>"sfz"</code> <code>runat</code><code>=</code><code>"server"</code> <code>type</code><code>=</code><code>"text"</code> <code>placeholder</code><code>=</code><code>"请扫描档案袋上面的条形码..."</code> <code>/></code>

<code> </code><code><</code><code>button</code> <code>id</code><code>=</code><code>"ssss"</code><code>></code>

<code> </code><code>档案查询</</code><code>button</code><code>></code>

<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"float: left; width: 780px; margin-top: -40px; margin-left: 10px;"</code><code>></code>

<code> </code><code><</code><code>table</code> <code>id</code><code>=</code><code>"grid"</code><code>></code>

<code> </code><code></</code><code>table</code><code>></code>

<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"float: left; margin-top: 10px; margin-left: 10px;"</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"返回主菜单"</code> <code>id</code><code>=</code><code>"button1s"</code> <code>onclick</code><code>=</code><code>"javascript: window.location.href = '../Main.aspx'"</code> <code>/></code>

其中id为grid的table部分，与上面的js部分中grid对应。

该页面的后台代码部分：

<code>protected</code> <code>void</code> <code>Page_Load(</code><code>object</code> <code>sender, EventArgs e)</code>

<code> </code><code>string</code> <code>dagid = Request.QueryString[</code><code>"dagid"</code><code>];</code>

<code> </code><code>hfjia.Value = dagid;</code>

很简单就是给前台存放的一个隐藏域赋值，以在页面刷新时保持状态（记录档案架的位置）。

后台的数据源地址为ServiceHanlder.ashx，看看这里面的详细代码。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<code>namespace</code> <code>DAMIS.Pad2.Service</code>

<code> </code><code>/// ServiceHanlder 的摘要说明</code>

<code> </code><code>public</code> <code>class</code> <code>ServiceHanlder : IHttpHandler</code>

<code> </code><code>public</code> <code>void</code> <code>ProcessRequest(HttpContext context)</code>

<code> </code><code>if</code> <code>(!</code><code>string</code><code>.IsNullOrEmpty(context.Request[</code><code>"mode"</code><code>]))</code>

<code> </code><code>if</code> <code>(context.Request[</code><code>"mode"</code><code>].Equals(</code><code>"Query"</code><code>))</code>

<code> </code><code>if</code> <code>(!</code><code>string</code><code>.IsNullOrEmpty(context.Request[</code><code>"sfz"</code><code>]))</code>

<code> </code><code>string</code> <code>sfz = context.Request[</code><code>"sfz"</code><code>];</code>

<code> </code><code>UserInfo userInfo = GetUserInfoById(sfz);</code>

<code> </code><code>if</code> <code>(userInfo != </code><code>null</code><code>)</code>

<code> </code><code>ReturnData rd = </code><code>new</code> <code>ReturnData();</code>

<code> </code><code>rd.total = 1;</code>

<code> </code><code>rd.rows = </code><code>new</code> <code>List<UserInfo>() { userInfo };</code>

<code> </code><code>DataContractJsonSerializer json = </code><code>new</code> <code>DataContractJsonSerializer(rd.GetType());</code>

<code> </code><code>json.WriteObject(context.Response.OutputStream, rd);</code>

<code> </code><code>context.Response.Write(</code><code>"<script>alert('查无此人');</script>"</code><code>);</code>

<code> </code><code>string</code> <code>hfjia = Regex.Match(context.Request[</code><code>"hfjia"</code><code>].Split(</code><code>';'</code><code>)[0], </code><code>@"\d+"</code><code>).Value;</code>

<code> </code><code>string</code> <code>page = context.Request[</code><code>"page"</code><code>];</code>

<code> </code><code>string</code> <code>rows = context.Request[</code><code>"rows"</code><code>];</code>

<code> </code><code>QueryData(hfjia, page, rows, context);</code>

<code> </code><code>if</code> <code>(context.Request[</code><code>"mode"</code><code>].Equals(</code><code>"QueryInner"</code><code>))</code>

<code> </code><code>string</code> <code>dajid = context.Request[</code><code>"dajid"</code><code>].Trim(</code><code>'\''</code><code>);</code>

<code> </code><code>string</code> <code>dagid = context.Request[</code><code>"dagid"</code><code>];</code>

<code> </code><code>string</code> <code>hfjia = </code><code>string</code><code>.Join(</code><code>"-"</code><code>, dajid, dagid);</code>

<code> </code><code>string</code> <code>page = context.Request[</code><code>"page"</code><code>];</code>

<code> </code><code>string</code> <code>rows = context.Request[</code><code>"rows"</code><code>];</code>

<code> </code><code>QueryData(hfjia, page, rows, context);</code>

<code> </code><code>#region 查询档案（分页）</code>

<code> </code><code>public</code> <code>void</code> <code>QueryData(</code><code>string</code> <code>hfjia, </code><code>string</code> <code>page, </code><code>string</code> <code>rows, HttpContext context)</code>

<code> </code><code>string</code> <code>msg = </code><code>string</code><code>.Empty;</code>

<code> </code><code>DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, </code><code>out</code> <code>msg);</code>

<code> </code><code>foreach</code> <code>(DataRow dr </code><code>in</code> <code>dt.Rows)</code>

<code> </code><code>list.Add(</code><code>new</code> <code>UserInfo()</code>

<code> </code><code>PersonIdNum = dr[</code><code>"PersonIdNum"</code><code>].ToString(),</code>

<code> </code><code>PersonName = dr[</code><code>"PersonName"</code><code>].ToString(),</code>

<code> </code><code>PersonSex = dr[</code><code>"PersonSex"</code><code>].ToString(),</code>

<code> </code><code>DAId = dr[</code><code>"DAId"</code><code>].ToString(),</code>

<code> </code><code>DABusKindName = dr[</code><code>"DABusKindName"</code><code>].ToString(),</code>

<code> </code><code>DAKindName = dr[</code><code>"DAKindName"</code><code>].ToString(),</code>

<code> </code><code>DALevelCodeName = dr[</code><code>"DALevelCodeName"</code><code>].ToString(),</code>

<code> </code><code>DAGInPosition = dr[</code><code>"DAGInPosition"</code><code>].ToString(),</code>

<code> </code><code>DAGInUserId = dr[</code><code>"DAGInUserId"</code><code>].ToString(),</code>

<code> </code><code>DAGInOrg = dr[</code><code>"DAGInOrg"</code><code>].ToString(),</code>

<code> </code><code>IsValid = dr[</code><code>"IsValid"</code><code>].ToString(),</code>

<code> </code><code>list = list.OrderBy(x => x.DAGInPosition).ToList();</code>

<code> </code><code>ReturnData rd = </code><code>new</code> <code>ReturnData();</code>

<code> </code><code>rd.total = dt.Rows.Count;</code>

<code> </code><code>rd.rows = list.Where(x => x.IsValid == </code><code>"0"</code><code>).Skip(Convert.ToInt32(rows) * (Convert.ToInt32(page) - 1)).Take(Convert.ToInt32(rows)).ToList();</code>

<code> </code><code>DataContractJsonSerializer json = </code><code>new</code> <code>DataContractJsonSerializer(rd.GetType());</code>

<code> </code><code>json.WriteObject(context.Response.OutputStream, rd);</code>

<code> </code><code>#endregion</code>

<code> </code><code>#region 通过***号获取用户基本信息</code>

<code> </code><code>/// 通过***号获取用户基本信息</code>

<code> </code><code>public</code> <code>static</code> <code>UserInfo GetUserInfoById(</code><code>string</code> <code>id)</code>

<code> </code><code>string</code> <code>hfjia = CommonBLL.GetUserPositionById(id);</code>

<code> </code><code>if</code> <code>(!</code><code>string</code><code>.IsNullOrEmpty(hfjia))</code>

<code> </code><code>hfjia = hfjia.Split(</code><code>'-'</code><code>)[0] + </code><code>"-"</code> <code>+ hfjia.Split(</code><code>'-'</code><code>)[1];</code>

<code> </code><code>DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, </code><code>out</code> <code>msg);</code>

<code> </code><code>if</code> <code>(dt != </code><code>null</code> <code>&& dt.Rows.Count > 0)</code>

<code> </code><code>DataRow dr = dt.Select(</code><code>"personidnum = '"</code> <code>+ id + </code><code>"'"</code><code>).FirstOrDefault();</code>

<code> </code><code>UserInfo userInfo = </code><code>new</code> <code>UserInfo()</code>