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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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中获得视频时间总长度的另一种方法
2011/09/15 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python模拟实现分发扑克牌
2020/04/22 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
商务主管岗位职责
2013/12/08 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
开学寄语大全
2014/04/08 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
优秀党员先进材料
2014/12/18 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
刑事申诉状范文
2015/05/20 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书