前言

Datatables是一款jquery表格插件乓梨。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能事富。

DataTables中文網
DataTables英文網（資料更多）
IT狗窩

Editor

Editor是官方提供的表格編輯寬展組件。
優(yōu)點：一大堆；
缺點：付費哮内，破解版一般是老版本
今天主角不是官方的組件，所以跳過壮韭。

DataTables.AltEditor（免費北发，開源）

DataTables最低兼容版本1.10.8

原作者Github
bug修復版

提供簡單的添加、編輯和刪除Buttons喷屋，只需要簡單的設置即可：

var availableButtons = [
    {text: '添加', name: 'add'},
    {extend: 'selected', text: '編輯', name: 'edit'},
    {extend: 'selected', text: '刪除', name: 'delete'}
  ];

$(tableId).dataTable({
      columnDefs: columnHeader,
      data: data.data,
      altEditor: true,     // 必須設置為true
      dom: "Bfrtip",
      buttons: availableButtons,
      onAddRow: function (datatable, rowdata, success, error) {
          //點擊添加Button觸發(fā)事件
      },
      onDeleteRow: function (datatable, rowdata, success, error) {
         /點擊刪除Button觸發(fā)事件
      },
      onEditRow: function (datatable, rowdata, success, error) {
          //點擊編輯Button觸發(fā)事件
      }
    })

Bug分析

原作者的AltEditor寫的很好了（愛動手造輪子的都是好孩子）琳拨，在一個DataTable情況下，沒發(fā)現(xiàn)Bug屯曹，如果是初始化了多個DataTable狱庇，其中任意一個DataTable點擊添加（編輯或刪除），所有DataTable都會觸發(fā)onAddRow（onEditRow或onDeleteRow）是牢，這點我開始沒注意僵井，后來才發(fā)現(xiàn)的陕截。

這個Bug可是夠大了驳棱，于是開始各種找，最后花了兩天各種調試才找到农曲。

首先點擊添加（編輯或刪除）都會彈出窗口（div）社搅，但是，每個DataTable彈出的窗口中button都相同乳规，做事件綁定時就會把所有相同id的button綁定上這個事件形葬。也就是說，初始化DataTable很多暮的，一次觸發(fā)次數(shù)也會很多笙以。

繼續(xù)找問題

以一段代碼為例

$('#altEditor-modal').on('show.bs.modal', function () {
         var btns = '<button type="button" data-content="remove" class="btn btn-default" data-dismiss="modal">關閉</button>' +
           '<button type="button" data-content="remove" class="btn btn-primary" id="editRowBtn" >提交更改</button>';
         $('#altEditor-modal').find('.modal-title').html('編輯記錄');
         $('#altEditor-modal').find('.modal-body').html(data);
         $('#altEditor-modal').find('.modal-footer').html(btns);
       });

id="editRowBtn" 這個東西萬年不變。源代碼那些操作提交按鈕都是寫死的ID冻辩。

動手解決

好了猖腕，問題就是id重復了，那怎么辦恨闪？在AltEditor庫中為了區(qū)分不同DataTable倘感，有一個叫做 namespace 的屬性，一個叫做 _instance 每綁定一個DataTable就會有一個全局變量自加1咙咽，namespace 就是字符串 “.altEditor"+_instance老玛。

  var _instance = 0;
  var altEditor = function (dt, opts) {
    //省略一萬字
    this.s = {
      dt: new DataTable.Api(dt),
      namespace: '.altEditor' + (_instance++)
    };
   //省略一萬字
  }

這樣能保證他知道哪個是當前操作的DataTable。
我們把id="editRowBtn"變成id="editRowBtn"+namespace，這樣就保證唯一性了蜡豹。
在不同的方法內找到namespace的變量不太一樣麸粮， this.s.namespace或者 that.s.namespace。
替換所有需要id的地方十幾處余素。

大功告成豹休？

namespace:".altEditor"+_instance，這個有問題桨吊，namespace字符串雖然拼在了id后面威根，但是因為包含一個點，導致提交事件不觸發(fā)视乐，所以最后應該是namespace:“altEditor"+_instance就行了洛搀。

部分改造代碼

var btns = '<button type="button" data-content="remove" class="btn btn-default" data-dismiss="modal">關閉</button>' +
            '<button type="button" data-content="remove" class="btn btn-primary" id="editRowBtn' + that.s.namespace + '" >提交更改</button>';

 _editRowCallback: function (response, status, more) {
        $("div#altEditor-modal").find("button#editRowBtn" + this.s.namespace).prop('disabled', true);
      }

開發(fā)中的開源項目：遠程數(shù)據(jù)調試

1.png

9.png

小期待

以下項目都是我圍繞遠程控制寫的項目和子項目。都給star一遍吧佑淀。??

我的小站：IT狗窩
技術聯(lián)系QQ:1264957104