JQueryEasyUI datagrid框架的进阶使用

 更新时间:2013年04月08日 10:20:28   作者:  
本篇文章小编为大家介绍JQueryEasyUI datagrid框架的基本使用,有需要的朋友可以参考一下

由于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中好像没有介绍,但是可以直接以数组的形式写到上面,完美显示:

图片跟上面的代码不是对应的,只是为了展示个效果;

easyuidatagrid+asp.net mvc3的示例代码下载地址(只有前台和Controller):增删改都写了 示例下载地址:http://download.csdn.net/detail/a417758082/5215044

datapattern.js下载地址:
http://download.csdn.net/detail/a417758082/5215139

相关文章

  • JQuery实现的图文自动轮播效果插件

    JQuery实现的图文自动轮播效果插件

    这篇文章主要介绍了JQuery实现的图文自动轮播效果插件,涉及jQuery处理鼠标事件及动画效果的方法,需要的朋友可以参考下
    2015-06-06
  • jquery select(列表)的操作(取值/赋值)

    jquery select(列表)的操作(取值/赋值)

    因为工作的原因,从上周开始接触了jquery,以前我是自己写js的函数库,把一些常用的的方法写成函数,现在学习了jquery,发现还真是方便。不尽简洁了很多。用Ajax很方便,而且还可以很方便创造一些特效。
    2009-08-08
  • jQuery实现自动切换播放的经典滑动门效果

    jQuery实现自动切换播放的经典滑动门效果

    这篇文章主要介绍了jQuery实现自动切换播放的经典滑动门效果,可实现tab自动定时切换的功能,涉及jQuery基于定时函数动态操作页面元素的相关技巧,需要的朋友可以参考下
    2015-09-09
  • jQuery+PHP星级评分实现方法

    jQuery+PHP星级评分实现方法

    很多网站都应用了星级评分效果,让用户可以对正在浏览的文章、电影、资源等进行评分,让网站增添了几分互动效果。本文将讲解如何使用jQuery和PHP来实现星级评分效果。
    2015-10-10
  • jQuery实现弹幕特效

    jQuery实现弹幕特效

    这篇文章主要为大家详细介绍了jQuery实现弹幕特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • jQuery UI Autocomplete 1.8.16 中文输入修正代码

    jQuery UI Autocomplete 1.8.16 中文输入修正代码

    jQuery UI Autocomplete 1.8.16 中文输入修正代码,使用jQuery UI Autocomplete的朋友可以参考下
    2012-04-04
  • JQuery的attr 与 val区别

    JQuery的attr 与 val区别

    这篇文章主要介绍了JQuery的attr 与 val区别的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jquery实现图片放大镜效果

    jquery实现图片放大镜效果

    这篇文章主要为大家详细介绍了jquery实现图片放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • jQuery表单事件实例代码分享

    jQuery表单事件实例代码分享

    这篇文章主要为大家详细介绍了jQuery表单事件实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • jquery制作搜狐快站页面效果示例分享

    jquery制作搜狐快站页面效果示例分享

    这篇文章主要介绍了jquery制作搜狐快站页面效果示例,需要的朋友可以参考下
    2014-02-02

最新评论