http://www.cnblogs.com/ruanmou001/p/3840954.html
一、神马是easyui
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。
下载地址：
二、目录说明
三、搭建环境
引入：
<script src="../easyui/jquery-1.8.0.min.js"></script>
<script src="../easyui/jquery.easyui.min.js"></script>
<link href="../easyui/themes/default/easyui.css" rel="stylesheet" />
四、datagrid的使用
先上效果：
布局用easyui里面的layout做的
数据加载实现方法：
1 //页面加载初始化
2 $(function () {
3 GetUserList(GetSqlWhere());
4 });
5
6 //获取查询条件
7 function GetSqlWhere() {
8 var strWhere = "1=1";
9 var username = $.trim($("#stxtUserName").val());
10 var phase = $("#ssPhase").val();
11 if (username != "") {
12 strWhere += " and UserName='" + username + "'";
13 }
14 if (phase != "0") {
15 strWhere += " and Phase='" + phase + "'";
16 }
17 return strWhere;
18 }
19
20 //获取用户列表
21 function GetUserList(strWhere) {
22 $("#dg").datagrid({
23 url: "ajax/UserMAjax.ashx",
24 queryParams://每次请求的参数
25 {
26 cmd: 'list',
27 strWhere: strWhere
28 },
29 pagination: true,//允许分页
30 rownumbers: true,//行号
31 singleSelect: false,//只选择一行
32 pageSize: 15,//每一页数据数量
33 checkOnSelect: false,
34 pageList: [5, 10, 15, 20, 25],
35 columns: [[{
36 field: 'id',
37 checkbox: true,
38 },
39 {
40 field: "UserId",
41 title: "用户ID",
42 align: "center",
43 width: 50
44 }, {
45 field: "RealName",
46 title: "学生姓名",
47 align: "center",
48 width: 100
49 }, {
50 field: "ClassId",
51 title: "学生类型",
52 align: "center",
53 width: 100,
54 formatter: function (val, row) {
55 if (val == 1) {
56 return ".NET学员";
57 }
58 else if (val == 2) {
59 return "JAVA学员";
60 }
61 }
62 }, {
63 field: "UserName",
64 title: "用户名",
65 align: "center",
66 width: 100
67 }, {
68 field: "Pwd",
69 title: "密码",
70 align: "center",
71 width: 100
72 }, {
73 field: "PhoneNum",
74 title: "电话号码",
75 align: "center",
76 width: 100
77 }
78 , {
79 field: "Sex",
80 title: "性别",
81 align: "center",
82 width: 50
83 }, {
84 field: "Phase",
85 title: "班级",
86 align: "center",
87 width: 130
88 }, {
89 field: "QQ",
90 title: "QQ",
91 align: "center",
92 width: 100
93 }, {
94 field: "UserType",
95 title: "权限身份",
96 align: "center",
97 width: 120,
98 formatter: function (val, row) {
99 if (val == 1) {
100 return "管理员";
101 }
102 else if (val == 2) {
103 return "讲师";
104 }
105 else if (val == 3) {
106 return "正式学员";
107 }
108 else if (val == 4) {
109 return "咨询者";//下午05，57分钟
110 }
111 }
112 }, {
113 field: "HeadPic",
114 title: "头像地址",
115 align: "center",
116 }, {
117 field: "ClientIP",
118 title: "注册IP",
119 align: "center",
120 width: 100
121 }, {
122 field: "CreatedTime",
123 title: "注册时间",
124 align: "center",
125 width: 100,
126 formatter: function (val, row) {
127 var str1 = val.indexOf("(")
128 var str2 = val.lastIndexOf(")");
129 var dateValue = val.substring(str1 + 1, str2);
130 var date = new Date(parseInt(dateValue));
131 return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
132 }
133
134 }, {
135 field: "Message",
136 title: "留言",
137 align: "center"
138
139 }
140 ]],
141
142 //点击每一行的时候触发
143 //onClickRow: function (rowIndex, rowData) {
144 // alert(rowData["UserId"]);
145 //}
146 });
147 }
查找：
function SelUser() {
var s = GetSqlWhere();
GetUserList(s);
}
添加：
function SaveUser() {
$('#fm').form('submit', {
url: "ajax/UserMAjax.ashx?cmd=add",
success: function (data) {
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.rbool) {
window.location.reload();
}
else {
$.messager.alert('提示', data.infor);
}
}
});
}
编辑：
function EditUser() {
$('#fm').form('submit', {
url: "ajax/UserMAjax.ashx?cmd=edit&userid=" + userid,
success: function (data) {
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.rbool) {
window.location.reload();
}
else {
$.messager.alert('提示', data.infor);
}
}
});
}
UserMAjax.ashx 页面内容：
1 public class UserMAjax : IHttpHandler
2 {
3 string infor = "";
4 bool rbool = false;
5 string json = "";
6 HttpContext context;
7 int userid;
8 public void ProcessRequest(HttpContext context)
9 {
10
11 this.context = context;
12 context.Request.ContentEncoding = Encoding.GetEncoding("utf-8"); //必须加上，否则会产生乱码
13 //接收浏览器 get/post 过来的参数cmd
14 string cmd = context.Request["cmd"].ToString();
15
16 switch (cmd)
17 {
18 case "list":
19 json = GetList();
20 break;
21 case "add":
22 json = AddUser();
23 break;
24 case "del":
25 json = DelUser();
26 break;
27 case "getuser":
28 json = GetUser();
29 break;
30 case "edit":
31 json = EditUser();
32 break;
33 }
34 context.Response.Write(json);
35 }
36 public string EdtUser()
37 {
38 return "";
39 }
40 /// <summary>
41 /// 获取用户
42 /// </summary>
43 /// <returns></returns>
44 public string GetUser()
45 {
46 string UserIds = context.Request.Form["EUserIds"].ToString();
47 UserInfor user = null;
48 try
49 {
50 user = UserInforDal.m_UserInforDal.GetModel(Convert.ToInt32(UserIds));
51 rbool = true;
52 }
53 catch (Exception ex)
54 {
55 infor = "数据获取失败，错误信息：" + ex.Message;
56 }
57 JavaScriptSerializer jss = new JavaScriptSerializer();
58 Dictionary<string, object> d = new Dictionary<string, object>();
59 d.Add("user", user);
60 d.Add("rbool", rbool);
61 d.Add("infor", infor);
62 return jss.Serialize(d);
63 }
64 /// <summary>
65 /// 获取用户列表
66 /// </summary>
67 /// <returns></returns>
68 public string GetList()
69 {
70 string sqlWhere = context.Request.Form["strWhere"].ToString();
71 int pageindex = Convert.ToInt32(context.Request.Form["page"].ToString());
72 int pagesize = Convert.ToInt32(context.Request.Form["rows"].ToString());
73 List<UserInfor> list = UserInforDal.m_UserInforDal.GetList(sqlWhere, pagesize, pageindex);
74 int count = UserInforDal.m_UserInforDal.GetCount(sqlWhere);
75 return toPageJson(list, count);
76 }
77 //编辑用户
78 public string EditUser()
79 {
80 userid = Convert.ToInt32(context.Request.QueryString["userid"].ToString());
81 string RealName = context.Request.Form["RealName"].ToString();
82 string ClassId = context.Request.Form["ClassId"].ToString();
83 string UserName = context.Request.Form["UserName"].ToString();
84 string Pwd = context.Request.Form["Pwd"].ToString();
85 string PhoneNum = context.Request.Form["PhoneNum"].ToString();
86 string Sex = context.Request.Form["Sex"].ToString();
87 string Phase = context.Request.Form["Phase"].ToString();
88 string HeadPic = context.Request.Form["HeadPic"].ToString();
89 if (string.IsNullOrEmpty(RealName) || ClassId == "0" || string.IsNullOrEmpty(UserName) || string.IsNullOrEmpty(Pwd) || string.IsNullOrEmpty(PhoneNum) || Sex == "0" || Phase == "0")
90 {
91 infor = "各项不能为空";
92 }
93 else
94 {
95 try
96 {
97 UserInfor user = UserInforDal.m_UserInforDal.GetModel(userid);
98 if (user != null)
99 {
100 user.RealName = RealName;
101 user.ClassId = Convert.ToInt32(ClassId);
102 user.UserName = UserName;
103 user.Pwd = Pwd;
104 user.PhoneNum = PhoneNum;
105 user.Sex = Sex;
106 user.Phase = Phase;
107 user.CreatedTime = DateTime.Now;
108 user.HeadPic = HeadPic;
109 UserInforDal.m_UserInforDal.Update(user);
110 rbool = true;
111 }
112 }
113 catch (Exception ex)
114 {
115 infor = ex.Message;
116 }
117 }
118 JavaScriptSerializer jss = new JavaScriptSerializer();
119 Dictionary<string, object> d = new Dictionary<string, object>();
120 d.Add("infor", infor);
121 d.Add("rbool", rbool);
122 return jss.Serialize(d);
123 }
124 /// <summary>
125 /// 删除用户
126 /// </summary>
127 /// <returns></returns>
128 public string DelUser()
129 {
130 string UserIds = context.Request.Form["UserIds"].ToString();
131 try
132 {
133 if (UserIds.Contains("_") == false)
134 {
135 UserInforDal.m_UserInforDal.Delete(Convert.ToInt32(UserIds));
136 infor = "删除成功";
137 rbool = true;
138 }
139 else
140 {
141 string[] aUserIds = UserIds.Split('_');
142 for (int i = 0; i < aUserIds.Length; i++)
143 {
144 UserInforDal.m_UserInforDal.Delete(Convert.ToInt32(aUserIds[i]));
145 }
146 infor = "删除成功";
147 rbool = true;
148 }
149 }
150 catch (Exception ex)
151 {
152 infor = "删除失败，错误信息：" + ex.Message;
153 }
154 JavaScriptSerializer jss = new JavaScriptSerializer();
155 Dictionary<string, object> d = new Dictionary<string, object>();
156 d.Add("infor", infor);
157 d.Add("rbool", rbool);
158 return jss.Serialize(d);
159 }
160 /// <summary>
161 /// 添加用户
162 /// </summary>
163 /// <returns></returns>
164 public string AddUser()
165 {
166 string RealName = context.Request.Form["RealName"].ToString();
167 string ClassId = context.Request.Form["ClassId"].ToString();
168 string UserName = context.Request.Form["UserName"].ToString();
169 string Pwd = context.Request.Form["Pwd"].ToString();
170 string PhoneNum = context.Request.Form["PhoneNum"].ToString();
171 string Sex = context.Request.Form["Sex"].ToString();
172 string Phase = context.Request.Form["Phase"].ToString();
173 if (string.IsNullOrEmpty(RealName) || ClassId == "0" || string.IsNullOrEmpty(UserName) || string.IsNullOrEmpty(Pwd) || string.IsNullOrEmpty(PhoneNum) || Sex == "0" || Phase == "0")
174 {
175 infor = "各项不能为空";
176 }
177 else
178 {
179 try
180 {
181 UserInfor user = new UserInfor();
182 user.RealName = RealName;
183 user.ClassId = Convert.ToInt32(ClassId);
184 user.UserName = UserName;
185 user.Pwd = Pwd;
186 user.PhoneNum = PhoneNum;
187 user.Sex = Sex;
188 user.Phase = Phase;
189 user.CreatedTime = DateTime.Now;
190 user.HeadPic = "http://www.ruanmou.net/upfile/HeadPic/man.GIF";
191 UserInforDal.m_UserInforDal.Add(user);
192 infor = "添加成功";
193 rbool = true;
194 }
195 catch (Exception ex)
196 {
197 infor = ex.Message;
198 }
199 }
200
201 JavaScriptSerializer jss = new JavaScriptSerializer();
202 Dictionary<string, object> d = new Dictionary<string, object>();
203 d.Add("infor", infor);
204 d.Add("rbool", rbool);
205 return jss.Serialize(d);
206 }
207 /// <summary>
208 /// 专程json格式字符串
209 /// </summary>
210 /// <param name="list"></param>
211 /// <param name="total"></param>
212 /// <returns></returns>
213 public static string toPageJson(object list, int total)
214 {
215 JavaScriptSerializer jss = new JavaScriptSerializer();
216 Dictionary<string, object> d = new Dictionary<string, object>();
217 d.Add("total", total);
218 d.Add("rows", list);
219 return jss.Serialize(d);
220 }
221 }
easyui api下载：