DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQueryEasyUI datagrid框架的進階使用
JQueryEasyUI datagrid框架的進階使用
編輯:JQuery特效代碼     

由於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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved