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入门—选择器实现隔行变色实例代码
Jan 04 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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
服务器端解压缩zip的脚本
2006/12/22 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
Js中sort()方法的用法
2006/11/04 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
Python获取指定字符前面的所有字符方法
2018/05/02 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
python实现简单文件读写函数
2021/02/25 Python
金融专业推荐信
2013/11/14 职场文书
医院办公室主任职责
2013/12/29 职场文书
公司合并协议书范本
2014/09/30 职场文书
小石潭记导游词
2015/02/03 职场文书
黄石寨导游词
2015/02/05 职场文书
计算机教师工作总结
2015/08/13 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书