背景

在同一時間，可能很多人在編輯修改同一數據，這會導致在一個人還在在修改的過程中另一人在完成了修改并保存了數據。editor在button插件的擴展中可以有效的緩解這個問題：自定義一個編輯按鈕，此編輯按鈕實現 點擊按鈕后，首先刷新數據，然后再彈出模態框的功能。詳細信息點擊這里查看官網說明

---

使用效果如下圖所示：

點擊刷新并編輯 按鈕，按鈕會有一個加載狀態的動畫效果，此刻正在刷新數據，刷新完成后彈出編輯框?。

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

---

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();//獲取每行在前端自動生成的id數組var selectedRows = dt.rows({ selected: true }).data();//獲取選中數據var length = selectedRows.length;//得到選中數據的數組的長度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屬性中添加一個按鈕即可，代碼如下圖所示：

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

---

?說明：

? 1、在ajax中需要將每行的id (datatable默認的是存id字段是DT_RowId?) 傳到后端，因為在成功回調函數里，會根據id刷新數據。本文中id是在前端動態生成的，單獨返回給后端沒什么用，必須加上另外一個屬性，本文中我隨便取了Name這個屬性。在實際項目中可以自定義id，并且用那些前后端都能識別的字符串，那樣就只需要傳一個id到后端就可以了。

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。