詳解EasyUi控件中的Datagrid
最近手頭有個(gè)web項(xiàng)目需要用到第三方控件(EasyUi),用第三方控件做出來的效果畢竟比原生態(tài)的要稍微好看那么一點(diǎn)，該項(xiàng)目中有個(gè)需求，需要在數(shù)據(jù)列表中直接編輯數(shù)據(jù)保存，行話叫做行內(nèi)編輯。
在講行內(nèi)編輯之前，我們需要先了解如何使用EasyUi創(chuàng)建一個(gè)DataGrid，當(dāng)然方式有很多（1.easyui.js，或者直接html代碼加easyui的Style），我采用的是JS的方式：
一、使用Js創(chuàng)建DataGrid
上面是效果圖，
Html代碼如下：在頁面定義一個(gè)table
<!--數(shù)據(jù)展示 --> <div> <table id="DataGridInbound"></table> </div>
Js代碼如下：
有幾個(gè)我自己認(rèn)為比較重要的屬性在此標(biāo)記下
url：這里是datagrid獲取數(shù)據(jù)集的地址，就是你的Action，需要注意的是，你的Action需要返回Json格式的數(shù)據(jù)。
pagination：設(shè)置datagrid是否分頁顯示
queryParams：你的查詢條件參數(shù)
formatter：格式化，在日期列用到了，EasyUi的datagrid顯示日期如果不格式話，日期會亂顯示
這些屬性在EasyUi的官網(wǎng)都有詳細(xì)介紹，我就不深入解釋了。
$("#DataGridInbound").datagrid({
title: '入庫詳情',
idField: 'Id',
rownumbers: 'true',
url: '/Inbound/GetPageInboundGoodsDetail',
pagination: true,//表示在datagrid設(shè)置分頁
rownumbers: true,
singleSelect: true,
striped: true,
nowrap: true,
collapsible: true,
fitColumns: true,
remoteSort: false,
loadMsg: "正在努力加載數(shù)據(jù)，請稍后...",
queryParams: { ProductName: "", Status: "",SqNo:"" },
onLoadSuccess: function (data) {
if (data.total == 0) {
var body = $(this).data().datagrid.dc.body2;
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暫無數(shù)據(jù)</h1></td></tr>');
$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
}
//如果通過調(diào)用reload方法重新加載數(shù)據(jù)有數(shù)據(jù)時(shí)顯示出分頁導(dǎo)航容器
else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
},
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'Id', hidden: 'true' },
{ field: 'InBoundId', hidden: 'true' },
{ field: 'ProductId', hidden: 'true' },
{ field: 'ProductTypeId', hidden: 'true' },
{ field: 'SqNo', title: '入庫參考號', width: '100', align: 'left', sortable: true },
{
field: 'Status', title: '狀態(tài)', width: '100', align: 'left', sortable: true,
formatter: function (value, index, row) {
if (value == "1") {
return '<span style="color:green;">已入庫</span>';
}
else if (value == "-1") {
return '<span style="color:#FFA54F;">待入庫</span>';
}
}
},
{
field: 'InboundDate', title: '入庫日期', width: '100', align: 'left', sortable: true,
formatter: function (date) {
var pa = /.*\((.*)\)/;
var unixtime = date.match(pa)[1].substring(0, 10); //通過正則表達(dá)式來獲取到時(shí)間戳的字符串
return getTime(unixtime);
}
},
{ field: 'ProductName', title: '產(chǎn)品名稱', width: '100', align: 'left', sortable: true },
{ field: 'ProductType', title: '產(chǎn)品類型', width: '100', align: 'left', sortable: true },
{ field: 'Num', title: '數(shù)量', width: '100', align: 'left', sortable: true },
{ field: 'Storage', title: '所屬倉庫', width: '100', align: 'left', sortable: true },
{ field: 'CompanyCode', title: '所屬公司', width: '100', align: 'left', sortable: true },
{ field: 'CreateBy', title: '操作人', width: '100', align: 'left', sortable: true },
]],
});
二、今天的重點(diǎn)，DataGrid行內(nèi)編輯
如上效果圖，我們在DataGrid行內(nèi)直接變數(shù)據(jù)
Js代碼如下：
如何實(shí)現(xiàn)行內(nèi)編輯，需要在你所編輯的單元格中加入editor屬性，editor屬性有個(gè)type（他支持很多控件類型，可以到官網(wǎng)查看）就是編輯的控件類型。
比如說，上圖中“入庫狀態(tài)”，首先我們定義數(shù)據(jù)源，json格式是重點(diǎn)。
var InboundStatus = [{ "value": "1", "text": "入庫" }, { "value": "-1", "text": "待入庫" }];
然后需要格式轉(zhuǎn)換函數(shù)，不然你選擇的時(shí)候只會顯示value值，不是顯示文本值。代碼如下：
function unitformatter(value, rowData, rowIndex) {
if (value == 0) {
return;
}
for (var i = 0; i < InboundStatus.length; i++) {
if (InboundStatus[i].value == value) {
return InboundStatus[i].text;
}
}
}
如何把數(shù)據(jù)源綁定到DataGrid列中，代碼如下：
formatter：使用我們前面定義的轉(zhuǎn)換格式函數(shù)。
options：中的data就是我們定義的數(shù)據(jù)源。
valueField:選中后的value值，不用詳細(xì)解釋了吧
textField：選中后顯示的值，文本值。
type：combobox，就是下拉選項(xiàng)的樣式。
{
field: 'Status', title: '入庫狀態(tài)', formatter: unitformatter, editor: {
type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
}
},
//這部分代碼請結(jié)合下面的創(chuàng)建Grid的Js代碼查看。
$("#dataGrid").datagrid({
title: "產(chǎn)品列表",
idField: 'ProductID',
treeField: 'ProductName',
onClickCell: onClickCell,
striped: true,
nowrap: true,
collapsible: true,
fitColumns: true,
remoteSort: false,
sortOrder: "desc",
pagination: true,//表示在datagrid設(shè)置分頁
rownumbers: true,
singleSelect: false,
loadMsg: "正在努力加載數(shù)據(jù)，請稍后...",
url: "/Inbound/GetProductPage",
onLoadSuccess: function (data) {
if (data.total == 0) {
var body = $(this).data().datagrid.dc.body2;
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暫無數(shù)據(jù)</h1></td></tr>');
$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
}
//如果通過調(diào)用reload方法重新加載數(shù)據(jù)有數(shù)據(jù)時(shí)顯示出分頁導(dǎo)航容器
else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
},
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'ProductID', title: '產(chǎn)品ID', hidden: true },
{ field: 'CategoryID', title: '分類ID', hidden: true },
{ field: 'ProductName', title: '產(chǎn)品名稱', width: '100', align: 'left', sortable: true },
{ field: 'CompanyCode', title: '所屬公司', width: '100', align: 'center', sortable: true },
{ field: 'CategoryName', title: '所屬分類', width: '100', align: 'center', sortable: true },
{ field: 'Num', title: '數(shù)量', editor: 'numberbox' },
{
field: 'Status', title: '入庫狀態(tài)', formatter: unitformatter, editor: {
type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
}
},
{
field: 'InDate', title: '入庫日期', width: '100', editor: {
type: 'datebox'
}
},
{
field: 'Storage', width: '100', title: '所入倉庫',
formatter: function (value, row) {
return row.Storage || value;
},
editor: {
type: 'combogrid', options: {
//url: '/Storage/GetAllStorage',
//url:'/Product/GetAllCustomerAddress',
rownumbers: true,
data: $.extend(true, [], sdata),
idField: 'AddressID',
textField: 'Name',
columns: [[
{ field: 'AddressID', hidden: true },
{ field: 'Name', title: '庫名' },
{ field: 'Country', title: '國家' },
{ field: 'Province', title: '省份' },
{ field: 'City', title: '市' },
{ field: 'Area', title: '區(qū)' },
{ field: 'Address', title: '詳細(xì)地址' },
]],
loadFilter: function (sdata) {
if ($.isArray(sdata)) {
sdata = {
total: sdata.length,
rows: sdata
}
}
return sdata;
},
}
}
}
]],
onBeginEdit: function (index, row) {
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
$(ed.target).combogrid('setValue', { AddressID: row.AddressID, Name: row.Name });
},
onEndEdit: function (index, row) {
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
row.Storage = $(ed.target).combogrid('getText');
},
onClickRow: function (index, row) {//getEditor
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
if (ed != undefined) {
var s = row.Storage;
for (var i = 0; i < sdata.length; i++) {
if (s == sdata[i].Name) {
$(ed.target).combogrid('setValue', sdata[i].AddressID);
}
}
}
}
});
三、重頭戲，也是我遇到的問題。
描述：我在datagrid中添加了下拉datagrid控件，當(dāng)我第一次選中后，如果在去點(diǎn)擊datagrid行，選中的下拉datagrid控件的值會被刷掉，這個(gè)問題確實(shí)困擾我很久，不過后來處理了，那種感覺也是無比的爽?。?/p>
如上效果圖，“所入倉庫”一列，下拉是個(gè)datagrid，他的專業(yè)詞匯叫“Combogird”。就是這個(gè)玩意第一次選中沒問題，第二次點(diǎn)擊會把第一次選中的值刷掉。這也是一開始我對EasyUi的一個(gè)OnClickRow事件不了解。
先來上我之前的錯(cuò)誤代碼：
onClickRow: function (index, row) {//getEditor
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
$(ed.target).combogrid('setValue', row.Name);
}
}
}
大家伙一定很苦惱這個(gè)row.Name是個(gè)什么玩意？what？其實(shí)我一開始也不知道，因?yàn)檫@個(gè)是錯(cuò)誤代碼，我是病急亂投醫(yī)，胡亂寫的，哈哈，也不是胡亂寫啦，因?yàn)槲业南吕璯rid中有個(gè)字段是Name，然而我把他混淆了，此row是指你點(diǎn)擊的datagrid的row，而不是你數(shù)據(jù)源的row。我也是不斷調(diào)試Js看出來的端倪。我點(diǎn)擊datagrid的時(shí)候，代碼跳入OnClickRow事件中，有句代碼：“var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });”，然后發(fā)現(xiàn)ed為null, Js拋異常，但是界面看不出來，只是把選中的數(shù)據(jù)刷掉了。找到問題后，還是不確定，代碼修改完，再運(yùn)行，正常顯示，也不刷掉我選中的值。
正確代碼如下：
onClickRow: function (index, row) {//getEditor
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
if (ed != undefined) {
var s = row.Storage;
for (var i = 0; i < sdata.length; i++) {
if (s == sdata[i].Name) {
$(ed.target).combogrid('setValue', sdata[i].AddressID);
}
}
}
}
一下是下拉Grid的數(shù)據(jù)源
function synchroAjaxByUrl(url) {
var temp;
$.ajax({
url: url,
async: false,
type: 'get',
dataType: "json",
success: function (data) {
temp = data;
}
});
return temp;
}
var sdata = synchroAjaxByUrl('/Product/GetAllCustomerAddress');
總結(jié)
以上所述是小編給大家介紹的EasyUi控件中的Datagrid，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
- jQuery easyui datagrid動態(tài)查詢數(shù)據(jù)實(shí)例講解
- 擴(kuò)展easyui.datagrid，添加數(shù)據(jù)loading遮罩效果代碼
- jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁的方法
- jQuery EasyUI之DataGrid使用實(shí)例詳解
- jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開后保存數(shù)據(jù)
- 實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
- jquery Easyui Datagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加）
- EasyUI使用DataGrid實(shí)現(xiàn)動態(tài)列數(shù)據(jù)綁定
相關(guān)文章
圖標(biāo)斜著移動到指定的位置如何實(shí)現(xiàn)，本文給予了詳細(xì)的解決方法，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
jQuery實(shí)現(xiàn)判斷上傳圖片類型和大小的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷上傳圖片類型和大小的方法,結(jié)合實(shí)例形式分析了jQuery針對上傳圖片屬性獲取、判定相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了jQuery驗(yàn)證元素是否為空的兩種常用方法,實(shí)例分析了兩種常用的判斷為空技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jquery通過a標(biāo)簽刪除table中的一行的代碼
刪除table中的一行的方法有很多，在本文為大家介紹下jquery是如何做到的，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2013-12-12
jQuery實(shí)現(xiàn)簡易的輸入框字?jǐn)?shù)計(jì)數(shù)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡易的輸入框字?jǐn)?shù)計(jì)數(shù)功能,結(jié)合實(shí)例形式分析了jQuery針對頁面元素屬性的獲取與計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
jQuery語法高亮插件能夠?qū)撁嬷械母鞣N程序源代碼語法著色加亮，并且支持多種語言，在此分享下，感興趣的朋友可以參考下2013-04-04
使用Jquery搭建最佳用戶體驗(yàn)的登錄頁面之記住密碼自動登錄功能（含后臺代碼）
今天將登錄功能徹底完成，加入記住密碼自動登錄功能，密碼在客戶端進(jìn)行第一次加密存儲。并修改了一些bug，優(yōu)化js代碼，上一版本太亂了。2011-07-07
詳談jQuery.load()和Jsp的include的區(qū)別
下面小編就為大家?guī)硪黄斦刯Query.load()和Jsp的include的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
jQuery EasyUI之驗(yàn)證框validatebox實(shí)例詳解
本文通過實(shí)例代碼給大家講解了jQuery EasyUI之驗(yàn)證框validatebox知識，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery無縫輪播圖代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12