Advanced use of JQueryEasyUI datagrid framework

Advanced use of JQueryEasyUI datagrid framework_jquery

WBOY

Release： 2016-05-16 17:38:07

Original

1048 people have browsed it

Since datagrid receives data in Json format, there will be problems when we display the data in the frontend, especially the time format. After Json serialization, the frontend cannot display the correct time data, so how do we solve this problem? ? First we can use datapattern.js to solve this problem: no need to talk nonsense, just go to the code:

<script src="Scripts/datapattern.js" type="text/javascript"></script>

Copy after login

Copy code The code is as follows:

//List initialization
function initTable(searchWhere) {
$('#tt').datagrid({
url: '/UserInfo/GetAllUserInfos',
title: 'User List',
width: 700,
height: 400 ,
fitColumns: true,
idField: 'ID',
loadMsg: 'Loading user information...',
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: 'User number', width: 80 },
{ field: 'UName', title: 'User name ', width: 120 },
{ field: 'Pwd', title: 'Password', width: 120 },
{ field: 'Phone', title: 'Mobile phone', width: 120 },
{ field: 'Mail', title: 'Email', width: 120 },
{ field: 'SubTime', title: 'Registration time', width: 120,
formatter: function (value, row, index) {//Json format time is converted to normal format
return (eval(value.replace(//Date((d ))//gi, "new Date($1)"))).pattern( "yyyy-MM-dd");
}
}
]],
toolbar: [
{
id: 'btnadd',
text: 'Registered user ',
iconCls: 'icon-add',
handler: function () {
showCreateDialog();
}
},
{
id: 'btnDownShelf' ,
text: 'Modify user',
iconCls: 'icon-edit',
handler: function () {
upDateUser();
}
},
 {
id: 'btnDel',
text: 'Delete user',
iconCls: 'icon-cancel',
handler: function () {
delUsers();
 }
},
{
id: 'btnSet',
text: 'Set user role',
iconCls: 'icon-redo',
handler: function () { 
setUserRole();
}
},
{
id: 'btnSetVip',
text: 'Set special role',
iconCls: 'icon-redo' ,
handler: function () {
setVip();
}
}]
});
}

Toolbar refers to the button on the form. It seems that there is no introduction in the API, but it can be written directly to it in the form of an array and displayed perfectly:

图片跟上面的代码不是对应的，只是为了展示个效果；<br><br>easyuidatagrid+asp.net mvc3的示例代码下载地址（只有前台和Controller）：增删改都写了 
示例下载地址：http://download.csdn.net/detail/a417758082/5215044<br><br>datapattern.js下载地址：<br>http://download.csdn.net/detail/a417758082/5215139<br><br>

Copy after login