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 EasyUI框架中的Datagrid数据表格组件结构详解
- jQuery easyUI datagrid 增加求和统计行的实现代码
- jquery easyui datagrid实现增加,修改,删除方法总结
- jQuery Easyui学习之datagrid 动态添加、移除editor
- jQuery EasyUI之DataGrid使用实例详解
- jQuery EasyUI datagrid实现本地分页的方法
- Jquery下EasyUI组件中的DataGrid结果集清空方法
- jQuery easyui datagrid动态查询数据实例讲解
- jQuery EasyUI API 中文文档 - DataGrid数据表格
- jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
相关文章
jquery操作iframe实现父页面和子页面相互操作的九种情况
现实开发中难免会遇到子页面、父页面相互操作的情况,本文主要介绍了jquery操作iframe实现父页面和子页面相互操作的九种情况,具有一定的参考价值,感兴趣的可以了解一下2024-02-02jQuery html表格排序插件tablesorter使用方法详解
这篇文章主要为大家详细介绍了jQuery html表格排序插件tablesorter的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-02-02jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
这篇文章主要介绍了jquery+ajax实现上传图片并显示上传进度功能,结合实例形式分析了jQuery+ajax结合layer.js插件与php后台交互,实现显示上传进度的相关操作技巧,需要的朋友可以参考下2019-06-06Jquery下EasyUI组件中的DataGrid结果集清空方法
要求选择“地区”及“代维公司”后,刷新第一个DataGrid框体,下面为大家介绍下如何清空Jquery下EasyUI组件中的DataGrid结果集2014-01-01在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
easyUI是jquery的一个插件,是民间的插件,easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码、html代码和Css样式,但是很容易出现jquery.easyui.min.js函数库问题,小编教大家如何解决问题,需要的朋友可以参考下2015-09-09
最新评论