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 }
View Code

查找：

function SelUser() {
    var s = GetSqlWhere();
    GetUserList(s);
}
View Code

添加：

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);
            }
        }
    });
}
View Code

编辑：

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);
            }
        }
    });
}
View Code

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 }
View Code

 

easyui api下载：

http://pan.baidu.com/s/1sjsHrPj

posted @ 2014-07-13 12:10  蜡笔小新111  阅读(24472)  评论(1)  编辑  收藏  举报