easyui之datagrid的使用
一、神马是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下载：