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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
新手简单了解vue
May 29 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
聊一聊JS中this的指向问题
2016/06/17 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
Python 正则表达式的高级用法
2016/12/04 Python
使用Python处理BAM的方法
2018/09/28 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python类如何定义私有变量
2020/02/03 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
python实现计算器简易版
2020/12/17 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
文秘专业大学生求职信
2013/11/10 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
一年级数学教学反思
2014/02/01 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
公司开业主持词
2015/07/02 职场文书
车间安全生产管理制度
2015/08/06 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers