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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
Javascript中window.name属性详解
Nov 19 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获取bing每日壁纸示例分享
2014/02/25 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
python中xlutils库用法浅析
2020/12/29 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
求职简历中自我评价
2014/01/28 职场文书
法律六进活动方案
2014/03/13 职场文书
股东协议书
2014/04/14 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
详解flex:1什么意思
2022/07/23 HTML / CSS