最近手頭有個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() + '" style="height: 35px; text-align: center;"><h1>暫無數據</h1></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 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); //通過正則表達式來獲取到時間戳的字符串 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() + '" style="height: 35px; text-align: center;"><h1>暫無數據</h1></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控件的值會被刷掉，這個問題確實困擾我很久，不過后來處理了，那種感覺也是無比的爽?。?/p>
如上效果圖，“所入倉庫”一列，下拉是個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，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
