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实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
详解javascript new的运行机制
Jan 26 Javascript
js实现日历的简单算法
Jan 24 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
实例详解Node.js 函数
Jun 10 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
vue+eslint+vscode配置教程
Aug 09 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
vue中data里面的数据相互使用方式
Jun 05 Vue.js
基于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中创建并处理图象
2006/10/09 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
公司捐款倡议书
2014/05/14 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
初婚初育证明范本
2015/06/18 职场文书
工程进度款催款函
2015/06/24 职场文书