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获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
jquery 插件学习(一)
Aug 06 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
小程序转发探索示例
Feb 19 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 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的五种设计模式
2012/09/05 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
Python字符串三种格式化输出
2020/09/17 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
大学生职业生涯规划书模板
2014/01/18 职场文书
代理人委托书
2014/08/01 职场文书
保安2014年终工作总结
2014/12/06 职场文书
五四青年节活动总结
2015/02/10 职场文书
食品安全责任书范本
2015/05/09 职场文书
python 闭包函数详细介绍
2022/04/19 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers