首页 > 代码库 > easyui之datagrid的使用
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等等。
下载地址：
http://pan.baidu.com/s/1eQgm9fc
二、目录说明
三、搭建环境
引入：
<script src="http://www.mamicode.com/easyui/jquery-1.8.0.min.js"></script>
<script src="http://www.mamicode.com/easyui/jquery.easyui.min.js"></script>
<link href="http://www.mamicode.com/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: 100121 }, {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 = http://www.mamicode.com/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 = http://www.mamicode.com/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 = http://www.mamicode.com/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 try132 {133 if (UserIds.Contains("_") == false)134 {135 UserInforDal.m_UserInforDal.Delete(Convert.ToInt32(UserIds));136 infor = "删除成功";137 rbool = true;138 }139 else140 {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 else178 {179 try180 {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下载：
http://pan.baidu.com/s/1sjsHrPj
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。