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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
jquery maxlength使用说明
Sep 09 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 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
PHP中对数据库操作的封装
2006/10/09 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
Seajs源码详解分析
2019/04/02 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python是编译运行的验证方法
2015/01/30 Python
在Python的web框架中配置app的教程
2015/04/30 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
详解Python中where()函数的用法
2018/03/27 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python tornado微信开发入门代码
2018/08/24 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
授权委托书格式范文
2014/08/02 职场文书
表扬稿格式范文
2015/01/16 职场文书
运动会3000米加油稿
2015/07/21 职场文书
实习报告怎么写
2019/06/20 职场文书