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 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
JavaScript中Function详解
Feb 27 Javascript
AngularJS表单基本操作
Jan 09 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
vue实现放大镜效果
Sep 17 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
layui分页效果实现代码
2017/05/19 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
基于vue--key值的特殊用处详解
2020/07/31 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python pandas RFM模型应用实例详解
2019/11/20 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
致铅球运动员广播稿精选
2014/01/12 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
经典安踏广告词
2014/03/21 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
校园广播稿100字
2014/10/06 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
遗嘱格式范本
2015/08/07 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL