easyui之datagrid的使用
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下载：
easyui之datagrid的使用的更多相关文章
- easyUI 中datagrid 返回列隐藏方法
easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...
- EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性
EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...
- easyui的datagrid行的某一列添加链接
通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...
- easyui的datagrid打印(转)
在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...
- EasyUI的datagrid分页
EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...
- easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
- 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能
我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...
- 修改easyui中datagrid表头和数据不能分开对齐的BUG。
easyui的datagrid中表头和列只能同时全部向左对齐,全部向右对齐或者居中对齐. 有时候有需求,数据向左或向右,表头居中对齐. 在不修改源码的情况下.下面的代码可以实现该功能. 把下面代码放在 ...
- JQuery EasyUI的datagrid的使用方式总结
JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...
- Easyui的datagrid结合hibernate实现数据分页
最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...
随机推荐
- 基于PXC的MySQL高可用环境简单部署
PXC简介 Percona XtraDB Cluster(简称PXC集群)提供了MySQL高可用的一种实现方法. 1.集群是有节点组成的,推荐配置至少3个节点,但是也可以运行在2个节点上. 2.每个节 ...
- Nginx采用https加密访问后出现的问题
线上的一个网站运行了一段时间,应领导要求,将其访问方式更改为https加密方式.更改为https后,网站访问正常,但网站注册功能不能正常使用了! 经过排查,是nginx配置里结合php部分漏洞了一个参 ...
- FMDB简单使用
1.增删改查://注意:dataWithPath中的路径参数一般会选择保存到沙箱中的Documents目录中: //如果这个参数设置为nil则数据库会在内存中创建: //如果设置为@””则会在沙箱中的 ...
- 【Spring开发】—— Spring注入静态变量
今天碰到一个问题,我的一个类提供了几种静态方法,静态方法需要另外一个类的实例提供处理,因此就写出了这样的代码: Class aa{ private static XXX xxx; xxx = Bean ...
- raid知识
1,raid形象理解(饮水机模型) http://dingyichao.blog.51cto.com/442449/698762 2,raid利用率 3,raid详细理解 raid0 raid ...
- [C#]動態叫用Web Service
http://www.dotblogs.com.tw/jimmyyu/archive/2009/04/22/8139.aspx 摘要 Web Service對大家來說想必都不陌生,也大都了解Web S ...
- 修改Matlab 2012b默认工作路径
MATLAB的路径有多种,这里只讲一下启动时设置成MATLAB的用户的默认工作路径. 本人不想去改MATLAB的原来系统文件,而是尽量利用startup.m.这个文件默认在'/home/r/文档/MA ...
- 20145222黄亚奇《Java程序设计》第3周学习总结
学号 <Java程序设计>第X周学习总结 教材学习内容总结 第四章: 类是对象的设计图,对象是类的实例. 参考名称与对象数据成员同名时,可以在数据成员前使用this区别. =是用在指定参考 ...
- unitty导出工程嵌入iOS原生工程中出现黑屏，但是模型还是可以扫。
一般上出现这个问题,其实就是因为两个注意点没有搞清楚.我们分析一下,如果我们的模型或者视屏能够出来但是屏幕还是黑屏的.说明我们的unity的组件其实已经加载出来了.但是供我们交互的那个Layer类并没 ...
- jsoup抓取借书记录
package tushuguan; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; ...