最近手頭有個web項目需要用到第三方控件(EasyUi),用第三方控件做出來的效果畢竟比原生態(tài)的要稍微好看那么一點,該項目中有個需求,需要在數(shù)據(jù)列表中直接編輯數(shù)據(jù)保存,行話叫做行內(nèi)編輯。
余杭網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)公司!從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項目制作,到程序開發(fā),運營維護。創(chuàng)新互聯(lián)公司成立與2013年到現(xiàn)在10年的時間,我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗,來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
在講行內(nèi)編輯之前,我們需要先了解如何使用EasyUi創(chuàng)建一個DataGrid,當然方式有很多(1.easyui.js,或者直接html代碼加easyui的Style),我采用的是JS的方式:
一、使用Js創(chuàng)建DataGrid
上面是效果圖,
Html代碼如下:在頁面定義一個table
<!--數(shù)據(jù)展示 --> <div> <table id="DataGridInbound"></table> </div>
Js代碼如下:
有幾個我自己認為比較重要的屬性在此標記下
url:這里是datagrid獲取數(shù)據(jù)集的地址,就是你的Action,需要注意的是,你的Action需要返回Json格式的數(shù)據(jù)。
pagination:設(shè)置datagrid是否分頁顯示
queryParams:你的查詢條件參數(shù)
formatter:格式化,在日期列用到了,EasyUi的datagrid顯示日期如果不格式話,日期會亂顯示
這些屬性在EasyUi的官網(wǎng)都有詳細介紹,我就不深入解釋了。
$("#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() + '" ><h2>暫無數(shù)據(jù)</h2></td></tr>'); $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide(); } //如果通過調(diào)用reload方法重新加載數(shù)據(jù)有數(shù)據(jù)時顯示出分頁導航容器 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 >已入庫</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: '產(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 }, ]], });
二、今天的重點,DataGrid行內(nèi)編輯
如上效果圖,我們在DataGrid行內(nèi)直接變數(shù)據(jù)
Js代碼如下:
如何實現(xiàn)行內(nèi)編輯,需要在你所編輯的單元格中加入editor屬性,editor屬性有個type(他支持很多控件類型,可以到官網(wǎng)查看)就是編輯的控件類型。
比如說,上圖中“入庫狀態(tài)”,首先我們定義數(shù)據(jù)源,json格式是重點。
var InboundStatus = [{ "value": "1", "text": "入庫" }, { "value": "-1", "text": "待入庫" }];
然后需要格式轉(zhuǎn)換函數(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值,不用詳細解釋了吧
textField:選中后顯示的值,文本值。
type:combobox,就是下拉選項的樣式。
{ 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() + '" ><h2>暫無數(shù)據(jù)</h2></td></tr>'); $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide(); } //如果通過調(diào)用reload方法重新加載數(shù)據(jù)有數(shù)據(jù)時顯示出分頁導航容器 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: '詳細地址' }, ]], 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,他的專業(yè)詞匯叫“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?其實我一開始也不知道,因為這個是錯誤代碼,我是病急亂投醫(yī),胡亂寫的,哈哈,也不是胡亂寫啦,因為我的下拉grid中有個字段是Name,然而我把他混淆了,此row是指你點擊的datagrid的row,而不是你數(shù)據(jù)源的row。我也是不斷調(diào)試Js看出來的端倪。我點擊datagrid的時候,代碼跳入OnClickRow事件中,有句代碼:“var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' })
;”,然后發(fā)現(xiàn)ed為null, Js拋異常,但是界面看不出來,只是把選中的數(shù)據(jù)刷掉了。找到問題后,還是不確定,代碼修改完,再運行,正常顯示,也不刷掉我選中的值。
正確代碼如下:
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,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
本文標題:詳解EasyUi控件中的Datagrid
本文URL:http://muchs.cn/article22/jehpcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站維護、ChatGPT、、品牌網(wǎng)站設(shè)計、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)