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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
javascript 密码强弱度检测万能插件
Feb 25 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
详解vue中axios的封装
2018/07/18 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
市场营销战略计划书
2014/05/06 职场文书
大学辅导员述职报告
2015/01/10 职场文书
化验室岗位职责
2015/02/14 职场文书
自荐信格式范文
2015/03/04 职场文书