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 ...
随机推荐
- 利用exif.js解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- JavaScript基于时间的动画算法
转自:https://segmentfault.com/a/1190000002416071 前言 前段时间无聊或有聊地做了几个移动端的HTML5游戏.放在不同的移动端平台上进行测试后有了诡异的发现, ...
- 八、Foundation -常用结构体
一.NSRange 在foundation/NSRange.h中对NSRange的定义 typedef struct _NSRange{ NSUInteger location; NSUInteger ...
- 文件“D:\file.txt”正由另一进程使用，因此该进程无法访问该文件。
关于如题的解决方案! 都是有一定编程基础的人,我就不讲其它的了. 1.在实例化一个FileStream后,用完它一定要关闭.先试试这一条: 2.第一条不起作用的话,用本条.在实例化FileStream ...
- WPS2013三合一全套精品视频教程-【word,excel，powerpoint】
WPS2013三合一全套精品视频教程-[word,excel,powerpoint]教程目录: 下载地址:http://www.fu83.cn/thread-184-1-1.html
- Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager
action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...
- IT应届生如何准备找工作？
今天和一个弟弟吃饭,他明年年初即将计算机研究生毕业.谈论到怎么找工作,觉得自己会的不多,心里非常发虚.虽然我当年找工作也走了很多弯路,思路并不是很清晰.但是工作了这么多年,对企业需要什么样子的人还是有 ...
- MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-partialview.html 系列教程:MVC5 + E ...
- [C#详解] (1) 自动属性、初始化器、扩展方法
文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/CSharp-focus-1.html 代码下载:点我下载 目录 前言 属性与自动属性 属性 自动属 ...
- [bzoj 2005][NOI 2010]能量采集（容斥原理+递推）
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2005 分析:首先易得ans=∑gcd(x,y)*2+1 然后我就布吉岛了…… 上网搜了下题解, ...