背景

在同一時(shí)間，可能很多人在編輯修改同一數(shù)據(jù)，這會(huì)導(dǎo)致在一個(gè)人還在在修改的過程中另一人在完成了修改并保存了數(shù)據(jù)。editor在button插件的擴(kuò)展中可以有效的緩解這個(gè)問題：自定義一個(gè)編輯按鈕，此編輯按鈕實(shí)現(xiàn) 點(diǎn)擊按鈕后，首先刷新數(shù)據(jù)，然后再彈出模態(tài)框的功能。詳細(xì)信息點(diǎn)擊這里查看官網(wǎng)說明

---

使用效果如下圖所示：

點(diǎn)擊刷新并編輯 按鈕，按鈕會(huì)有一個(gè)加載狀態(tài)的動(dòng)畫效果，此刻正在刷新數(shù)據(jù)，刷新完成后彈出編輯框?。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

---

JS代碼如下圖所示：

$.fn.dataTable.ext.buttons.editRefresh = {extend: 'edit',text: '刷新并編輯',action: function (e, dt, node, config) {this.processing(true);var selectedRowsIds = dt.rows({ selected: true }).ids();//獲取每行在前端自動(dòng)生成的id數(shù)組var selectedRows = dt.rows({ selected: true }).data();//獲取選中數(shù)據(jù)var length = selectedRows.length;//得到選中數(shù)據(jù)的數(shù)組的長度var selectedRowsNames = "";for (var i = 0; i < length; i++) {selectedRowsNames += selectedRows[i].Name;if (i != length - 1){selectedRowsNames += ",";}}var that = this;var url = config.editor.ajax().edit.url;//獲得editor中更新出操作的URL$.ajax({url: url,type: 'post',dataType: 'json',data: {refresh: 'rows',names:selectedRowsNames,ids: selectedRowsIds.toArray().join(','),},success: function (json) {// On success update rows with datafor (var i = 0 ; i < json.data.length ; i++) {dt.row('#' + json.data[i].DT_RowId).data(json.data[i]);}dt.draw(false);// And finally trigger editing on those rows$.fn.dataTable.ext.buttons.edit.action.call(that, e, dt, node, config);}});}};

然后在datatable 的 button屬性中添加一個(gè)按鈕即可，代碼如下圖所示：

{ extend: 'editRefresh', editor: editor },

---

?說明：

? 1、在ajax中需要將每行的id (datatable默認(rèn)的是存id字段是DT_RowId?) 傳到后端，因?yàn)樵诔晒卣{(diào)函數(shù)里，會(huì)根據(jù)id刷新數(shù)據(jù)。本文中id是在前端動(dòng)態(tài)生成的，單獨(dú)返回給后端沒什么用，必須加上另外一個(gè)屬性，本文中我隨便取了Name這個(gè)屬性。在實(shí)際項(xiàng)目中可以自定義id，并且用那些前后端都能識(shí)別的字符串，那樣就只需要傳一個(gè)id到后端就可以了。

?

?

總結(jié)

以上是生活随笔為你收集整理的JQuery Datatables editor 在编辑前刷新数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。