快捷導(dǎo)航

JQueryEasyUI datagrid框架的進(jìn)階使用

更新時間：2013年04月08日 10:20:28 作者：

本篇文章小編為大家介紹JQueryEasyUI datagrid框架的基本使用，有需要的朋友可以參考一下

由于datagrid接收數(shù)據(jù)為Json格式，所以我們在前臺展示數(shù)據(jù)的時候會出現(xiàn)問題，尤其是時間格式，在Json序列化之后，前臺無法展示正確的時間數(shù)據(jù)，那么我們?nèi)绾谓鉀Q這樣的問題呢？首先我們可以使用datapattern.js來解決這個問題：無需廢話，直接上代碼：

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

復(fù)制代碼代碼如下:

//列表初始化
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: '手機(jī)', width: 120 },
{ field: 'Mail', title: '郵箱', width: 120 },
{ field: 'SubTime', title: '注冊時間', width: 120,
formatter: function (value, row, index) {//Json格式時間轉(zhuǎn)化為正常格式
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: '設(shè)置用戶角色',
iconCls: 'icon-redo',
handler: function () {
setUserRole();
}
},
{
id: 'btnSetVip',
text: '設(shè)置特殊角色',
iconCls: 'icon-redo',
handler: function () {
setVip();
}
}]
});
}

toolbar指的是表單上面的按鈕，api中好像沒有介紹，但是可以直接以數(shù)組的形式寫到上面，完美顯示：

圖片跟上面的代碼不是對應(yīng)的，只是為了展示個效果；

easyuidatagrid+asp.net mvc3的示例代碼下載地址（只有前臺和Controller）：增刪改都寫了 
示例下載地址：http://download.csdn.net/detail/a417758082/5215044

datapattern.js下載地址：
http://download.csdn.net/detail/a417758082/5215139

您可能感興趣的文章: