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
; }
}
|
最终的效果图:
本文转自 guwei4037 51CTO博客,原文链接:http://blog.51cto.com/csharper/1619151