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

jQuery EasyUI框架的官方主页：http://www.jeasyui.com/demo/main/index.php。可以下载完整开发包，里面有示例代码可以参考。

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

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

css部分：

1
2
3
  <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部分：

1
2
3
<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的分页插件，后面会看到分页的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< 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对应。

该页面的后台代码部分：

1
2
3
4
5
protected  void  Page_Load( object  sender, EventArgs e)
{
     string  dagid = Request.QueryString[ "dagid" ];
     hfjia.Value = dagid;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
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 ;
         }
         #endregion
 
         public  bool  IsReusable
         {
             get
             {
                 return  false ;
             }
         }
     }
}

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

里面用到的一个实体类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     /// <summary>
     /// 分页返回数据
     /// </summary>
     public  class  ReturnData
     {
         /// <summary>
         /// 数据总数
         /// </summary>
         public  int  total {  get ;  set ; }
 
         /// <summary>
         /// 具体数据
         /// </summary>
         public  List<UserInfo> rows {  get ;  set ; }
     }

最终的效果图：