首頁  >  文章  >  web前端  >  JQueryEasyUI datagrid框架的進階使用_jquery

JQueryEasyUI datagrid框架的進階使用_jquery

WBOY
WBOY原創
2016-05-16 17:38:071027瀏覽

由於datagrid接收數據為Json格式,所以我們在前台展示數據的時候會出現問題,尤其是時間格式,在Json序列化之後,前台無法展示正確的時間數據,那麼我們如何解決這樣的問題呢?首先我們可以使用datapattern.js來解決這個問題:無需廢話,直接上程式碼:

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

複製程式碼 程式碼如下:

//清單初始化$('#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', check: ' 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: 'btnDownmo🎜>},
{
id: 'btnDownownDownf' ,
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中好像沒有介紹,但是可以直接以數組的形式寫到上面,完美顯示:

图片跟上面的代码不是对应的,只是为了展示个效果;<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> 
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn