手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JQueryEasyUI datagrid框架的进阶使用
JQueryEasyUI datagrid框架的进阶使用
摘要:由于datagrid接收数据为Json格式,所以我们在前台展示数据的时候会出现问题,尤其是时间格式,在Json序列化之后,前台无法展示正确的...

由于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框架的进阶使用1

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

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

datapattern.js下载地址:

http://download.csdn.net/detail/a417758082/5215139

【JQueryEasyUI datagrid框架的进阶使用】相关文章:

Javascript客户端脚本的设计和应用

JavaScript中的small()方法使用详解

简介JavaScript中getUTCMonth()方法的使用

jquery插件validation实现验证身份证号等

简介JavaScript中toTimeString()方法的使用

JavaScript中的unshift()方法的使用

实例剖析AngularJS框架中数据的双向绑定运用

JavaScript中的Math.E属性使用详解

JavaScript中的replace()方法使用详解

tagName的使用,留一笔

精品推荐
分类导航