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调用Session的实现代码
Oct 29 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
实例详解Node.js 函数
Jun 10 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 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 变量定义和变量替换的方法
2009/07/30 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
关于环保的标语
2014/06/13 职场文书
护林防火标语
2014/06/27 职场文书
小学生通知书评语
2014/12/31 职场文书
垂直极限观后感
2015/06/08 职场文书