JQueryEasyUI datagrid框架的基本使用


Posted in Javascript onApril 08, 2013

今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:
无需废话,上代码了:

<link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<!--easyui最全的样式包也可单独引用你想使用的样式包-->
<link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
<!--easyui自带图片样式包,也可自行添加-->
<script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
<!--我使用的是easyui 1.3.2,基于jquery-1.8.0-->
<script src="jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
<!--easyui的js包-->
<script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<!--easyui的中文语言包,默认是英文-->
</head>
<body id="layoutbody" class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
</div>
<div data-options="region:'west',title:'West',split:true" style="width: 100px;">
</div>
<div data-options="region:'center',title:'center title'" href="HTMLPage.htm" style="padding: 5px;
background: #eee; overflow: hidden;"><!--这里指向了一个htm页-->
</div>
</body>
</html>

HTMLPage.htm代码:
<script type="text/javascript" charst="utf-8">
//因为layout框架指向href时,只取html页面body中间的部分,所以该页面这样写即可
//有datagrid包含属性较多,所以尽量使用js的方式初始化datagrid框架
$(function () {
$("#dg").datagrid({
url: "GetJson.ashx", //指向一个一般处理程序或者一个控制器,返回数据要求是Json格式,直接赋值Json格式数据也可,我以demo中自带的Json数据为例,就不写后台代码了,但是我会说下后台返回的注意事项
title: "数据展示表格",
iconCls: "icon-add",
fitColumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小
//toolbar设置表格顶部的工具栏,以数组形式设置
idField: 'id', //标识列,一般设为id,可能会区分大小写,大家注意一下
loadMsg: "正在努力为您加载数据", //加载数据时向用户展示的语句
pagination: true, //显示最下端的分页工具栏
rownumbers: true, //显示行数 1,2,3,4...
pageSize: 10, //读取分页条数,即向后台读取数据时传过去的值
pageList: [10, 20, 30], //可以调整每页显示的数据,即调整pageSize每次向后台请求数据时的数据
//由于datagrid的属性过多,我就不每个都介绍了,如有需要,可以看它的API
sortName: "name", //初始化表格时依据的排序 字段 必须和数据库中的字段名称相同
sortOrder: "asc", //正序
columns: [[
{ field: 'code', title: 'Code', width: 100 },
{ field: 'name', title: 'Name', width: 100 ,sortable:true},//sortable:true点击该列的时候可以改变升降序
{ field: 'addr', title: 'addr', width: 100,
//这里可以添加这样一个方法,使其显示数据得到改变
// formatter: function (value, row, index) {
// if (value == "0") {
// return "普通角色";
// } else {
// return "特殊角色";
// }
// }
}
]]//这里之所以有两个方括号,是因为可以做成水晶报表形式,具体可看demo
});
});
</script>
<div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;" fit="true"
border="false">
<div title="Tab1" style="padding: 20px;" border="false">
<table id="dg">
</table>
</div>
</div>

JQueryEasyUI datagrid框架的基本使用

这是前台请求数据时发送的数据;

Json格式数据一定要是双引号的,单引号无法显示数据哦;

数据格式如下:

{ 
"total":239, 
"rows":[ 
{"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"}, 
{"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"}, 
{"code":"003","name":"Name 3","addr":"Address 87","col4":"col4 data"}, 
{"code":"004","name":"Name 4","addr":"Address 63","col4":"col4 data"}, 
{"code":"005","name":"Name 5","addr":"Address 45","col4":"col4 data"}, 
{"code":"006","name":"Name 6","addr":"Address 16","col4":"col4 data"}, 
{"code":"007","name":"Name 7","addr":"Address 27","col4":"col4 data"}, 
{"code":"008","name":"Name 8","addr":"Address 81","col4":"col4 data"}, 
{"code":"009","name":"Name 9","addr":"Address 69","col4":"col4 data"}, 
{"code":"010","name":"Name 10","addr":"Address 78","col4":"col4 data"} 
] 
}

这里呢,后台传递数据很重要:

注意:表格Post或者get回来的请求中
page:3 代表page为key,然后选择的当前页码为3
rows:10 代表一页的大小为10
后台返回的数据的格式为:{total:'',rows:[{},{}]}
只要包含了总数tatol字段,rows是具体的行数
例如:
Asp.Net MVC 例子:
public JsonResult GetAllUserInfos()
{
int pageSize = 5;
int pageIndex = 1;
int.TryParse(this.Request["page"], out pageIndex);
int.TryParse(this.Request["rows"], out pageSize);

pageSize = pageSize <= 0 ? 5 : pageSize;
pageIndex = pageIndex < 1 ? 1 : pageIndex;

var temp = db.UserInfo
.OrderBy(u=>u.Sort)
.Skip<UserInfo>((pageIndex-1)*pageSize)
.Take<UserInfo>(pageSize)
.ToList<UserInfo>();
Hashtable ht = new Hashtable();
ht["total"] = db.UserInfo.Count();
ht["rows"] = temp;
return Json(ht);
}

Asp.Net WebForm 例子:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var strWebName = context.Request["WebName"] ?? string.Empty;
var GoodsNo = context.Request["GoodsNo"] ?? string.Empty;
int categoryId = 0;

int pageIndex = 1;
int pageSize = 10;

int.TryParse(context.Request["rows"], out pageSize);
int.TryParse(context.Request["page"], out pageIndex);

decimal priceLeft = 0;
decimal priceRight = 1000000;
int goodsStatus = 0;
decimal.TryParse(context.Request["PriceLeft"], out priceLeft);
decimal.TryParse(context.Request["PriceRight"], out priceRight);
int.TryParse(context.Request["CategoryId"], out categoryId);
int.TryParse(context.Request["GoodsStatus"], out goodsStatus);
var goodsQueryParamter = new GoodsQueryParamter();

goodsQueryParamter.GoodsStatus = (Model.GoodsModel.GoodsStatusEnum)goodsStatus;

var ds = goodsService.GetGoodsList(goodsQueryParamter);
string json = string.Empty;

if (ds != null && ds.Tables.Count > 0)
{
System.Text.StringBuilder rowJson = new System.Text.StringBuilder();
int colLen = ds.Tables[0].Columns.Count;
DataColumnCollection col = ds.Tables[0].Columns;
foreach (DataRow row in ds.Tables[0].Rows)
{
System.Text.StringBuilder colJson = new System.Text.StringBuilder();
rowJson.Append("{");
for (int i = 0; i < colLen; i++)
{
colJson.Append("\"" + col[i].ColumnName + "\":\"" + row[i].ToString() + "\",");
}
rowJson.Append(colJson.ToString().TrimEnd(','));
rowJson.Append("},");
}
json = "{\"total\":" + ds.Tables[0].Rows[0]["sumGoods"] + ",\"rows\":[" + rowJson.ToString().TrimEnd(',') + "]}";
}
context.Response.Write(json);
}

ASP.Net中有一个类也可以序列化Json格式数据;

Javascript 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
js实现登录验证码
Dec 22 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
详解javascript replace高级用法
Feb 17 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
javascript canvas API内容整理
Feb 16 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 #Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 #Javascript
基于datagrid框架的查询
Apr 08 #Javascript
datagrid框架的删除添加与修改
Apr 08 #Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 #Javascript
jQuery setTimeout()函数使用方法
Apr 07 #Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 #Javascript
You might like
php自动适应范围的分页代码
2008/08/05 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
php中Snoopy类用法实例
2015/06/19 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue二级路由设置方法
2018/02/09 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python清空命令行方式
2020/01/13 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
python+opencv实现车道线检测
2021/02/19 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
借款协议书
2014/09/16 职场文书
2014年圣诞节寄语
2014/12/08 职场文书