JQueryEasyUI datagrid框架的进阶使用


Posted in Javascript onApril 08, 2013

由于datagrid接收数据为Json格式,所以我们在前台展示数据的时候会出现问题,尤其是时间格式,在Json序列化之后,前台无法展示正确的时间数据,那么我们如何解决这样的问题呢?首先我们可以使用datapattern.js来解决这个问题:无需废话,直接上代码:

<script src="Scripts/datapattern.js" type="text/javascript"></script>
//列表初始化
function initTable(searchWhere) {
$('#tt').datagrid({
url: '/UserInfo/GetAllUserInfos',
title: '用户列表',
width: 700,
height: 400,
fitColumns: true,
idField: 'ID',
loadMsg: '正在加载用户的信息...',
pagination: true,
singleSelect: false,
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30],
queryParams: searchWhere,
columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 50 },
{ field: 'ID', title: '用户编号', width: 80 },
{ field: 'UName', title: '用户名', width: 120 },
{ field: 'Pwd', title: '密码', width: 120 },
{ field: 'Phone', title: '手机', width: 120 },
{ field: 'Mail', title: '邮箱', width: 120 },
{ field: 'SubTime', title: '注册时间', width: 120,
formatter: function (value, row, index) {//Json格式时间转化为正常格式
return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd");
}
}
]],
toolbar: [
{
id: 'btnadd',
text: '注册用户',
iconCls: 'icon-add',
handler: function () {
showCreateDialog();
}
},
{
id: 'btnDownShelf',
text: '修改用户',
iconCls: 'icon-edit',
handler: function () {
upDateUser();
}
},
{
id: 'btnDel',
text: '删除用户',
iconCls: 'icon-cancel',
handler: function () {
delUsers();
}
},
{
id: 'btnSet',
text: '设置用户角色',
iconCls: 'icon-redo',
handler: function () {
setUserRole();
}
},
{
id: 'btnSetVip',
text: '设置特殊角色',
iconCls: 'icon-redo',
handler: function () {
setVip();
}
}]
});
}

toolbar指的是表单上面的按钮,api中好像没有介绍,但是可以直接以数组的形式写到上面,完美显示:

JQueryEasyUI datagrid框架的进阶使用

图片跟上面的代码不是对应的,只是为了展示个效果;easyuidatagrid+asp.net mvc3的示例代码下载地址(只有前台和Controller):增删改都写了 
示例下载地址:http://download.csdn.net/detail/a417758082/5215044
datapattern.js下载地址:
http://download.csdn.net/detail/a417758082/5215139
Javascript 相关文章推荐
jQuery对象的length属性用法实例
Dec 27 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
基于datagrid框架的查询
Apr 08 #Javascript
datagrid框架的删除添加与修改
Apr 08 #Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 #Javascript
jQuery setTimeout()函数使用方法
Apr 07 #Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 #Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 #Javascript
jQuery操作checkbox选择(list/table)
Apr 07 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php中addslashes函数与sql防注入
2014/11/17 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
angular动态表单制作
2018/02/23 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python列表解析配合if else的方法
2018/06/23 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
草船借箭教学反思
2014/02/03 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
《王二小》教学反思
2014/02/27 职场文书
推荐信怎么写
2014/05/09 职场文书
12岁生日演讲稿
2014/05/14 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
中小学生学籍证明
2014/10/25 职场文书
活动总结模板大全
2015/05/11 职场文书
爱国主题班会教案
2015/08/14 职场文书
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers