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.   1 //页面加载初始化
  2.   2 $(function () {
  3.   3     GetUserList(GetSqlWhere());
  4.   4 });
  5.   5
  6.   6 //获取查询条件
  7.   7 function GetSqlWhere() {
  8.   8     var strWhere = "1=1";
  9.   9     var username = $.trim($("#stxtUserName").val());
  10.  10     var phase = $("#ssPhase").val();
  11.  11     if (username != "") {
  12.  12         strWhere += " and UserName='" + username + "'";
  13.  13     }
  14.  14     if (phase != "0") {
  15.  15         strWhere += " and Phase='" + phase + "'";
  16.  16     }
  17.  17     return strWhere;
  18.  18 }
  19.  19
  20.  20 //获取用户列表
  21.  21 function GetUserList(strWhere) {
  22.  22     $("#dg").datagrid({
  23.  23         url: "ajax/UserMAjax.ashx",
  24.  24         queryParams://每次请求的参数
  25.  25             {
  26.  26                 cmd: 'list',
  27.  27                 strWhere: strWhere
  28.  28             },
  29.  29         pagination: true,//允许分页
  30.  30         rownumbers: true,//行号
  31.  31         singleSelect: false,//只选择一行
  32.  32         pageSize: 15,//每一页数据数量
  33.  33         checkOnSelect: false,
  34.  34         pageList: [5, 10, 15, 20, 25],
  35.  35         columns: [[{
  36.  36             field: 'id',
  37.  37             checkbox: true,
  38.  38         },
  39.  39         {
  40.  40             field: "UserId",
  41.  41             title: "用户ID",
  42.  42             align: "center",
  43.  43             width: 50
  44.  44         }, {
  45.  45             field: "RealName",
  46.  46             title: "学生姓名",
  47.  47             align: "center",
  48.  48             width: 100
  49.  49         }, {
  50.  50             field: "ClassId",
  51.  51             title: "学生类型",
  52.  52             align: "center",
  53.  53             width: 100,
  54.  54             formatter: function (val, row) {
  55.  55                 if (val == 1) {
  56.  56                     return ".NET学员";
  57.  57                 }
  58.  58                 else if (val == 2) {
  59.  59                     return "JAVA学员";
  60.  60                 }
  61.  61             }
  62.  62         }, {
  63.  63             field: "UserName",
  64.  64             title: "用户名",
  65.  65             align: "center",
  66.  66             width: 100
  67.  67         }, {
  68.  68             field: "Pwd",
  69.  69             title: "密码",
  70.  70             align: "center",
  71.  71             width: 100
  72.  72         }, {
  73.  73             field: "PhoneNum",
  74.  74             title: "电话号码",
  75.  75             align: "center",
  76.  76             width: 100
  77.  77         }
  78.  78         , {
  79.  79             field: "Sex",
  80.  80             title: "性别",
  81.  81             align: "center",
  82.  82             width: 50
  83.  83         }, {
  84.  84             field: "Phase",
  85.  85             title: "班级",
  86.  86             align: "center",
  87.  87             width: 130
  88.  88         }, {
  89.  89             field: "QQ",
  90.  90             title: "QQ",
  91.  91             align: "center",
  92.  92             width: 100
  93.  93         }, {
  94.  94             field: "UserType",
  95.  95             title: "权限身份",
  96.  96             align: "center",
  97.  97             width: 120,
  98.  98             formatter: function (val, row) {
  99.  99                 if (val == 1) {
  100. 100                     return "管理员";
  101. 101                 }
  102. 102                 else if (val == 2) {
  103. 103                     return "讲师";
  104. 104                 }
  105. 105                 else if (val == 3) {
  106. 106                     return "正式学员";
  107. 107                 }
  108. 108                 else if (val == 4) {
  109. 109                     return "咨询者";//下午05，57分钟
  110. 110                 }
  111. 111             }
  112. 112         }, {
  113. 113             field: "HeadPic",
  114. 114             title: "头像地址",
  115. 115             align: "center",
  116. 116         }, {
  117. 117             field: "ClientIP",
  118. 118             title: "注册IP",
  119. 119             align: "center",
  120. 120             width: 100
  121. 121         }, {
  122. 122             field: "CreatedTime",
  123. 123             title: "注册时间",
  124. 124             align: "center",
  125. 125             width: 100,
  126. 126             formatter: function (val, row) {
  127. 127                 var str1 = val.indexOf("(")
  128. 128                 var str2 = val.lastIndexOf(")");
  129. 129                 var dateValue = val.substring(str1 + 1, str2);
  130. 130                 var date = new Date(parseInt(dateValue));
  131. 131                 return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
  132. 132             }
  133. 133
  134. 134         }, {
  135. 135             field: "Message",
  136. 136             title: "留言",
  137. 137             align: "center"
  138. 138
  139. 139         }
  140. 140         ]],
  141. 141
  142. 142         //点击每一行的时候触发
  143. 143         //onClickRow: function (rowIndex, rowData) {
  144. 144         //    alert(rowData["UserId"]);
  145. 145         //}
  146. 146     });
  147. 147 }

查找：

  1. function SelUser() {
  2.     var s = GetSqlWhere();
  3.     GetUserList(s);
  4. }

添加：

  1. function SaveUser() {
  2.     $('#fm').form('submit', {
  3.         url: "ajax/UserMAjax.ashx?cmd=add",
  4.         success: function (data) {
  5.             var data = eval('(' + data + ')');  // change the JSON string to javascript object
  6.             if (data.rbool) {
  7.                 window.location.reload();
  8.             }
  9.             else {
  10.                 $.messager.alert('提示', data.infor);
  11.             }
  12.         }
  13.     });
  14. }

编辑：

  1. function EditUser() {
  2.     $('#fm').form('submit', {
  3.         url: "ajax/UserMAjax.ashx?cmd=edit&userid=" + userid,
  4.         success: function (data) {
  5.             var data = eval('(' + data + ')');  // change the JSON string to javascript object
  6.             if (data.rbool) {
  7.                 window.location.reload();
  8.             }
  9.             else {
  10.                 $.messager.alert('提示', data.infor);
  11.             }
  12.         }
  13.     });
  14. }

UserMAjax.ashx 页面内容：

  1.   1   public class UserMAjax : IHttpHandler
  2.   2     {
  3.   3         string infor = "";
  4.   4         bool rbool = false;
  5.   5         string json = "";
  6.   6         HttpContext context;
  7.   7         int userid;
  8.   8         public void ProcessRequest(HttpContext context)
  9.   9         {
  10.  10
  11.  11             this.context = context;
  12.  12             context.Request.ContentEncoding = Encoding.GetEncoding("utf-8"); //必须加上，否则会产生乱码
  13.  13             //接收浏览器 get/post 过来的参数cmd
  14.  14             string cmd = context.Request["cmd"].ToString();
  15.  15
  16.  16             switch (cmd)
  17.  17             {
  18.  18                 case "list":
  19.  19                     json = GetList();
  20.  20                     break;
  21.  21                 case "add":
  22.  22                     json = AddUser();
  23.  23                     break;
  24.  24                 case "del":
  25.  25                     json = DelUser();
  26.  26                     break;
  27.  27                 case "getuser":
  28.  28                     json = GetUser();
  29.  29                     break;
  30.  30                 case "edit":
  31.  31                     json = EditUser();
  32.  32                     break;
  33.  33             }
  34.  34             context.Response.Write(json);
  35.  35         }
  36.  36         public string EdtUser()
  37.  37         {
  38.  38             return "";
  39.  39         }
  40.  40         /// <summary>
  41.  41         /// 获取用户
  42.  42         /// </summary>
  43.  43         /// <returns></returns>
  44.  44         public string GetUser()
  45.  45         {
  46.  46             string UserIds = context.Request.Form["EUserIds"].ToString();
  47.  47             UserInfor user = null;
  48.  48             try
  49.  49             {
  50.  50                 user = UserInforDal.m_UserInforDal.GetModel(Convert.ToInt32(UserIds));
  51.  51                 rbool = true;
  52.  52             }
  53.  53             catch (Exception ex)
  54.  54             {
  55.  55                 infor = "数据获取失败，错误信息：" + ex.Message;
  56.  56             }
  57.  57             JavaScriptSerializer jss = new JavaScriptSerializer();
  58.  58             Dictionary<string, object> d = new Dictionary<string, object>();
  59.  59             d.Add("user", user);
  60.  60             d.Add("rbool", rbool);
  61.  61             d.Add("infor", infor);
  62.  62             return jss.Serialize(d);
  63.  63         }
  64.  64         /// <summary>
  65.  65         /// 获取用户列表
  66.  66         /// </summary>
  67.  67         /// <returns></returns>
  68.  68         public string GetList()
  69.  69         {
  70.  70             string sqlWhere = context.Request.Form["strWhere"].ToString();
  71.  71             int pageindex = Convert.ToInt32(context.Request.Form["page"].ToString());
  72.  72             int pagesize = Convert.ToInt32(context.Request.Form["rows"].ToString());
  73.  73             List<UserInfor> list = UserInforDal.m_UserInforDal.GetList(sqlWhere, pagesize, pageindex);
  74.  74             int count = UserInforDal.m_UserInforDal.GetCount(sqlWhere);
  75.  75             return toPageJson(list, count);
  76.  76         }
  77.  77         //编辑用户
  78.  78         public string EditUser()
  79.  79         {
  80.  80             userid = Convert.ToInt32(context.Request.QueryString["userid"].ToString());
  81.  81             string RealName = context.Request.Form["RealName"].ToString();
  82.  82             string ClassId = context.Request.Form["ClassId"].ToString();
  83.  83             string UserName = context.Request.Form["UserName"].ToString();
  84.  84             string Pwd = context.Request.Form["Pwd"].ToString();
  85.  85             string PhoneNum = context.Request.Form["PhoneNum"].ToString();
  86.  86             string Sex = context.Request.Form["Sex"].ToString();
  87.  87             string Phase = context.Request.Form["Phase"].ToString();
  88.  88             string HeadPic = context.Request.Form["HeadPic"].ToString();
  89.  89             if (string.IsNullOrEmpty(RealName) || ClassId == "0" || string.IsNullOrEmpty(UserName) || string.IsNullOrEmpty(Pwd) || string.IsNullOrEmpty(PhoneNum) || Sex == "0" || Phase == "0")
  90.  90             {
  91.  91                 infor = "各项不能为空";
  92.  92             }
  93.  93             else
  94.  94             {
  95.  95                 try
  96.  96                 {
  97.  97                     UserInfor user = UserInforDal.m_UserInforDal.GetModel(userid);
  98.  98                     if (user != null)
  99.  99                     {
  100. 100                         user.RealName = RealName;
  101. 101                         user.ClassId = Convert.ToInt32(ClassId);
  102. 102                         user.UserName = UserName;
  103. 103                         user.Pwd = Pwd;
  104. 104                         user.PhoneNum = PhoneNum;
  105. 105                         user.Sex = Sex;
  106. 106                         user.Phase = Phase;
  107. 107                         user.CreatedTime = DateTime.Now;
  108. 108                         user.HeadPic = HeadPic;
  109. 109                         UserInforDal.m_UserInforDal.Update(user);
  110. 110                         rbool = true;
  111. 111                     }
  112. 112                 }
  113. 113                 catch (Exception ex)
  114. 114                 {
  115. 115                     infor = ex.Message;
  116. 116                 }
  117. 117             }
  118. 118             JavaScriptSerializer jss = new JavaScriptSerializer();
  119. 119             Dictionary<string, object> d = new Dictionary<string, object>();
  120. 120             d.Add("infor", infor);
  121. 121             d.Add("rbool", rbool);
  122. 122             return jss.Serialize(d);
  123. 123         }
  124. 124         /// <summary>
  125. 125         /// 删除用户
  126. 126         /// </summary>
  127. 127         /// <returns></returns>
  128. 128         public string DelUser()
  129. 129         {
  130. 130             string UserIds = context.Request.Form["UserIds"].ToString();
  131. 131             try
  132. 132             {
  133. 133                 if (UserIds.Contains("_") == false)
  134. 134                 {
  135. 135                     UserInforDal.m_UserInforDal.Delete(Convert.ToInt32(UserIds));
  136. 136                     infor = "删除成功";
  137. 137                     rbool = true;
  138. 138                 }
  139. 139                 else
  140. 140                 {
  141. 141                     string[] aUserIds = UserIds.Split('_');
  142. 142                     for (int i = 0; i < aUserIds.Length; i++)
  143. 143                     {
  144. 144                         UserInforDal.m_UserInforDal.Delete(Convert.ToInt32(aUserIds[i]));
  145. 145                     }
  146. 146                     infor = "删除成功";
  147. 147                     rbool = true;
  148. 148                 }
  149. 149             }
  150. 150             catch (Exception ex)
  151. 151             {
  152. 152                 infor = "删除失败，错误信息：" + ex.Message;
  153. 153             }
  154. 154             JavaScriptSerializer jss = new JavaScriptSerializer();
  155. 155             Dictionary<string, object> d = new Dictionary<string, object>();
  156. 156             d.Add("infor", infor);
  157. 157             d.Add("rbool", rbool);
  158. 158             return jss.Serialize(d);
  159. 159         }
  160. 160         /// <summary>
  161. 161         /// 添加用户
  162. 162         /// </summary>
  163. 163         /// <returns></returns>
  164. 164         public string AddUser()
  165. 165         {
  166. 166             string RealName = context.Request.Form["RealName"].ToString();
  167. 167             string ClassId = context.Request.Form["ClassId"].ToString();
  168. 168             string UserName = context.Request.Form["UserName"].ToString();
  169. 169             string Pwd = context.Request.Form["Pwd"].ToString();
  170. 170             string PhoneNum = context.Request.Form["PhoneNum"].ToString();
  171. 171             string Sex = context.Request.Form["Sex"].ToString();
  172. 172             string Phase = context.Request.Form["Phase"].ToString();
  173. 173             if (string.IsNullOrEmpty(RealName) || ClassId == "0" || string.IsNullOrEmpty(UserName) || string.IsNullOrEmpty(Pwd) || string.IsNullOrEmpty(PhoneNum) || Sex == "0" || Phase == "0")
  174. 174             {
  175. 175                 infor = "各项不能为空";
  176. 176             }
  177. 177             else
  178. 178             {
  179. 179                 try
  180. 180                 {
  181. 181                     UserInfor user = new UserInfor();
  182. 182                     user.RealName = RealName;
  183. 183                     user.ClassId = Convert.ToInt32(ClassId);
  184. 184                     user.UserName = UserName;
  185. 185                     user.Pwd = Pwd;
  186. 186                     user.PhoneNum = PhoneNum;
  187. 187                     user.Sex = Sex;
  188. 188                     user.Phase = Phase;
  189. 189                     user.CreatedTime = DateTime.Now;
  190. 190                     user.HeadPic = "http://www.ruanmou.net/upfile/HeadPic/man.GIF";
  191. 191                     UserInforDal.m_UserInforDal.Add(user);
  192. 192                     infor = "添加成功";
  193. 193                     rbool = true;
  194. 194                 }
  195. 195                 catch (Exception ex)
  196. 196                 {
  197. 197                     infor = ex.Message;
  198. 198                 }
  199. 199             }
  200. 200
  201. 201             JavaScriptSerializer jss = new JavaScriptSerializer();
  202. 202             Dictionary<string, object> d = new Dictionary<string, object>();
  203. 203             d.Add("infor", infor);
  204. 204             d.Add("rbool", rbool);
  205. 205             return jss.Serialize(d);
  206. 206         }
  207. 207         /// <summary>
  208. 208         /// 专程json格式字符串
  209. 209         /// </summary>
  210. 210         /// <param name="list"></param>
  211. 211         /// <param name="total"></param>
  212. 212         /// <returns></returns>
  213. 213         public static string toPageJson(object list, int total)
  214. 214         {
  215. 215             JavaScriptSerializer jss = new JavaScriptSerializer();
  216. 216             Dictionary<string, object> d = new Dictionary<string, object>();
  217. 217             d.Add("total", total);
  218. 218             d.Add("rows", list);
  219. 219             return jss.Serialize(d);
  220. 220         }
  221. 221 }

easyui api下载：

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

easyui之datagrid的使用的更多相关文章

  1. easyUI 中datagrid 返回列隐藏方法

    easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...

  2. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  3. easyui的datagrid行的某一列添加链接

    通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...

  4. easyui的datagrid打印(转)

    在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...

  5. EasyUI的datagrid分页

    EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...

  6. easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题

    做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...

  7. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

  8. 修改easyui中datagrid表头和数据不能分开对齐的BUG。

    easyui的datagrid中表头和列只能同时全部向左对齐,全部向右对齐或者居中对齐. 有时候有需求,数据向左或向右,表头居中对齐. 在不修改源码的情况下.下面的代码可以实现该功能. 把下面代码放在 ...

  9. JQuery EasyUI的datagrid的使用方式总结

    JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...

  10. Easyui的datagrid结合hibernate实现数据分页

    最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...

随机推荐

  1. java中的单引号和双引号

    1.单引号引的数据 是char类型的,双引号引的数据 是String类型的:单引号只能引一个字符,而双引号可以引0个及其以上.char只是一个基本类型,而String 可以是一个类,可以直接引用.比如 ...

  2. Studying-Swift ：Day01

    学习地址:http://www.rm5u.com/    或    http://www.runoob.com/ 如果创建的是 OS X playground 需要引入 Cocoa;  如果我们想创建 ...

  3. tcpdump参数应用

    详细参数: http://www.cnblogs.com/ggjucheng/archive/2012/01/14/2322659.html 我用到的参数: 一 tcpdump重要参数 -i 指定监听 ...

  4. python数字图像处理（12）：基本图形的绘制

    图形包括线条.圆形.椭圆形.多边形等. 在skimage包中,绘制图形用的是draw模块,不要和绘制图像搞混了. 1.画线条 函数调用格式为: skimage.draw.line(r1,c1,r2,c ...

  5. slidingMenu有时候需要关闭侧边栏

    12个页签能往左滑动 但是往右滑动侧边栏就出来了 我们ViewPager的事件被占用了,那么就得关闭侧边栏的事件(第一个页签可以开启) 那么写个方法关闭侧边栏 slidingMenu.setTouch ...

  6. 北京联想招聘-IOS高级 加入qq 群：220486180 或者直接在此 留言咨询

    ios 高级开发 Job ID #: 47980 Position Title: 高级iOS development engineer Location: CHN-Beijing Functional ...

  7. Vs2012 中使用itoa

    自己在写程序的时候经常用到保存大量的图片,从而对其编号,所以要把整型转换成字符型. 通常自己定义string,而字符使用char[],把整形转换成char类型,然后和string类型相加,但是在VS2 ...

  8. 学习笔记——Maven settings.xml 配置详解

    文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${use ...

  9. javascript模块化详解

    模块化:每个模块只完成一个独立的功能,然后提供该功能的接口.模块间通过接口访问.模块中的(过程和数据)对于其它模块来说是私有的(不能访问修改) 原始人写法: function m1(){ //... ...

  10. maven编译设置pom.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...