JQueryEasyUI datagrid框架的進(jìn)階使用
由于datagrid接收數(shù)據(jù)為Json格式,所以我們?cè)谇芭_(tái)展示數(shù)據(jù)的時(shí)候會(huì)出現(xiàn)問題,尤其是時(shí)間格式,在Json序列化之后,前臺(tái)無法展示正確的時(shí)間數(shù)據(jù),那么我們?nèi)绾谓鉀Q這樣的問題呢?首先我們可以使用datapattern.js來解決這個(gè)問題:無需廢話,直接上代碼:
<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: '用戶編號(hào)', 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: '注冊(cè)時(shí)間', width: 120,
formatter: function (value, row, index) {//Json格式時(shí)間轉(zhuǎn)化為正常格式
return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd");
}
}
]],
toolbar: [
{
id: 'btnadd',
text: '注冊(cè)用戶',
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ù)組的形式寫到上面,完美顯示:
圖片跟上面的代碼不是對(duì)應(yīng)的,只是為了展示個(gè)效果;
easyuidatagrid+asp.net mvc3的示例代碼下載地址(只有前臺(tái)和Controller):增刪改都寫了 示例下載地址:http://download.csdn.net/detail/a417758082/5215044
datapattern.js下載地址:
http://download.csdn.net/detail/a417758082/5215139
- jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
- jQuery easyUI datagrid 增加求和統(tǒng)計(jì)行的實(shí)現(xiàn)代碼
- jquery easyui datagrid實(shí)現(xiàn)增加,修改,刪除方法總結(jié)
- jQuery Easyui學(xué)習(xí)之datagrid 動(dòng)態(tài)添加、移除editor
- jQuery EasyUI之DataGrid使用實(shí)例詳解
- jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁的方法
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
- jQuery easyui datagrid動(dòng)態(tài)查詢數(shù)據(jù)實(shí)例講解
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery Easyui Datagrid實(shí)現(xiàn)單行的上移下移及保存移動(dòng)的結(jié)果
相關(guān)文章
jquery操作iframe實(shí)現(xiàn)父頁面和子頁面相互操作的九種情況
現(xiàn)實(shí)開發(fā)中難免會(huì)遇到子頁面、父頁面相互操作的情況,本文主要介紹了jquery操作iframe實(shí)現(xiàn)父頁面和子頁面相互操作的九種情況,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼,涉及jQuery基于時(shí)間函數(shù)的定時(shí)遞歸調(diào)用實(shí)現(xiàn)帶緩沖效果的移動(dòng)功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10jQuery html表格排序插件tablesorter使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery html表格排序插件tablesorter的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能【附php后臺(tái)接收】
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能,結(jié)合實(shí)例形式分析了jQuery+ajax結(jié)合layer.js插件與php后臺(tái)交互,實(shí)現(xiàn)顯示上傳進(jìn)度的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
要求選擇“地區(qū)”及“代維公司”后,刷新第一個(gè)DataGrid框體,下面為大家介紹下如何清空J(rèn)query下EasyUI組件中的DataGrid結(jié)果集2014-01-01使用jquery實(shí)現(xiàn)仿百度自動(dòng)補(bǔ)全特效
這里給大家分享的效果是像百度的搜索框一樣,當(dāng)用戶在文本框輸入前幾個(gè)字母或是漢字的時(shí)候,該控件就能從存放數(shù)據(jù)的文或是數(shù)據(jù)庫里將所有以這些字母開頭的數(shù)據(jù)提示給用戶,供用戶選擇,提供方便,增加用戶體驗(yàn)。2015-07-07jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)
這篇文章主要介紹了jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)的相關(guān)資料,需要的朋友可以參考下2015-07-07在easyUI開發(fā)中,出現(xiàn)jquery.easyui.min.js函數(shù)庫問題的解決辦法
easyUI是jquery的一個(gè)插件,是民間的插件,easyUI使用起來很方便,里面有網(wǎng)頁制作的最重要的三大方塊:javascript代碼、html代碼和Css樣式,但是很容易出現(xiàn)jquery.easyui.min.js函數(shù)庫問題,小編教大家如何解決問題,需要的朋友可以參考下2015-09-09設(shè)置jQueryUI DatePicker默認(rèn)語言為中文
本文主要介紹jQueryUI DatePicker設(shè)置中文的方法,需要的朋友可以參考下。2016-06-06