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 相关文章推荐
图片之间的切换
Jun 26 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
javascript回调函数详解
Feb 06 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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 日漫
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
php通过各种函数判断0和空
2020/07/04 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
学前教育毕业生自荐信
2013/10/29 职场文书
管道维修工岗位职责
2013/12/27 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
2014年度考核工作总结
2014/12/24 职场文书
化妆品促销活动总结
2015/05/07 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
会计做账心得体会
2016/01/22 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL