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 相关文章推荐
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 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
如何选购合适的收音机
2021/03/01 无线电
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
vue实现计算器功能
2020/02/22 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python补齐字符串长度的实例
2018/11/15 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python绘制地震散点图
2019/06/18 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
深入浅析python的第三方库pandas
2020/02/13 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
《长城和运河》教学反思
2014/04/14 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
踏青活动策划方案
2014/08/19 职场文书
党员评议思想汇报
2014/10/08 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
孟佩杰观后感
2015/06/17 职场文书