最近手頭有個web項目需要用到第三方控件(EasyUi),用第三方控件做出來的效果畢竟比原生態的要稍微好看那么一點，該項目中有個需求，需要在數據列表中直接編輯數據保存，行話叫做行內編輯。
在講行內編輯之前，我們需要先了解如何使用EasyUi創建一個DataGrid，當然方式有很多（1.easyui.js，或者直接html代碼加easyui的Style），我采用的是JS的方式：
一、使用Js創建DataGrid
上面是效果圖，
Html代碼如下：在頁面定義一個table
<!--數據展示 --> <div> <table id="DataGridInbound"></table> </div>
Js代碼如下：
有幾個我自己認為比較重要的屬性在此標記下
url：這里是datagrid獲取數據集的地址，就是你的Action，需要注意的是，你的Action需要返回Json格式的數據。
pagination：設置datagrid是否分頁顯示
queryParams：你的查詢條件參數
formatter：格式化，在日期列用到了，EasyUi的datagrid顯示日期如果不格式話，日期會亂顯示
這些屬性在EasyUi的官網都有詳細介紹，我就不深入解釋了。
$("#DataGridInbound").datagrid({
title: '入庫詳情',
idField: 'Id',
rownumbers: 'true',
url: '/Inbound/GetPageInboundGoodsDetail',
pagination: true,//表示在datagrid設置分頁
rownumbers: true,
singleSelect: true,
striped: true,
nowrap: true,
collapsible: true,
fitColumns: true,
remoteSort: false,
loadMsg: "正在努力加載數據，請稍后...",
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() + '" ><h2>暫無數據</h2></td></tr>');
$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
}
//如果通過調用reload方法重新加載數據有數據時顯示出分頁導航容器
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: '狀態', width: '100', align: 'left', sortable: true,
formatter: function (value, index, row) {
if (value == "1") {
return '<span >已入庫</span>';
}
else if (value == "-1") {
return '<span >待入庫</span>';
}
}
},
{
field: 'InboundDate', title: '入庫日期', width: '100', align: 'left', sortable: true,
formatter: function (date) {
var pa = /.*\((.*)\)/;
var unixtime = date.match(pa)[1].substring(0, 10); //通過正則表達式來獲取到時間戳的字符串
return getTime(unixtime);
}
},
{ field: 'ProductName', title: '產品名稱', width: '100', align: 'left', sortable: true },
{ field: 'ProductType', title: '產品類型', width: '100', align: 'left', sortable: true },
{ field: 'Num', title: '數量', 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 },
]],
});
二、今天的重點，DataGrid行內編輯
如上效果圖，我們在DataGrid行內直接變數據
Js代碼如下：
如何實現行內編輯，需要在你所編輯的單元格中加入editor屬性，editor屬性有個type（他支持很多控件類型，可以到官網查看）就是編輯的控件類型。
比如說，上圖中“入庫狀態”，首先我們定義數據源，json格式是重點。
var InboundStatus = [{ "value": "1", "text": "入庫" }, { "value": "-1", "text": "待入庫" }];
然后需要格式轉換函數，不然你選擇的時候只會顯示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;
}
}
}
如何把數據源綁定到DataGrid列中，代碼如下：
formatter：使用我們前面定義的轉換格式函數。
options：中的data就是我們定義的數據源。
valueField:選中后的value值，不用詳細解釋了吧
textField：選中后顯示的值，文本值。
type：combobox，就是下拉選項的樣式。
{
field: 'Status', title: '入庫狀態', formatter: unitformatter, editor: {
type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
}
},
//這部分代碼請結合下面的創建Grid的Js代碼查看。
$("#dataGrid").datagrid({
title: "產品列表",
idField: 'ProductID',
treeField: 'ProductName',
onClickCell: onClickCell,
striped: true,
nowrap: true,
collapsible: true,
fitColumns: true,
remoteSort: false,
sortOrder: "desc",
pagination: true,//表示在datagrid設置分頁
rownumbers: true,
singleSelect: false,
loadMsg: "正在努力加載數據，請稍后...",
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() + '" ><h2>暫無數據</h2></td></tr>');
$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
}
//如果通過調用reload方法重新加載數據有數據時顯示出分頁導航容器
else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
},
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'ProductID', title: '產品ID', hidden: true },
{ field: 'CategoryID', title: '分類ID', hidden: true },
{ field: 'ProductName', title: '產品名稱', 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: '數量', editor: 'numberbox' },
{
field: 'Status', title: '入庫狀態', 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: '區' },
{ field: 'Address', title: '詳細地址' },
]],
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控件，當我第一次選中后，如果在去點擊datagrid行，選中的下拉datagrid控件的值會被刷掉，這個問題確實困擾我很久，不過后來處理了，那種感覺也是無比的爽??！
如上效果圖，“所入倉庫”一列，下拉是個datagrid，他的專業詞匯叫“Combogird”。就是這個玩意第一次選中沒問題，第二次點擊會把第一次選中的值刷掉。這也是一開始我對EasyUi的一個OnClickRow事件不了解。
先來上我之前的錯誤代碼：
onClickRow: function (index, row) {//getEditor
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
$(ed.target).combogrid('setValue', row.Name);
}
}
}
大家伙一定很苦惱這個row.Name是個什么玩意？what？其實我一開始也不知道，因為這個是錯誤代碼，我是病急亂投醫，胡亂寫的，哈哈，也不是胡亂寫啦，因為我的下拉grid中有個字段是Name，然而我把他混淆了，此row是指你點擊的datagrid的row，而不是你數據源的row。我也是不斷調試Js看出來的端倪。我點擊datagrid的時候，代碼跳入OnClickRow事件中，有句代碼：“var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });”，然后發現ed為null, Js拋異常，但是界面看不出來，只是把選中的數據刷掉了。找到問題后，還是不確定，代碼修改完，再運行，正常顯示，也不刷掉我選中的值。
正確代碼如下：
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的數據源
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');
總結
以上所述是小編給大家介紹的EasyUi控件中的Datagrid，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
