前言

Datatables是一款jquery表格插件。它是一個(gè)高度靈活的工具，可以將任何HTML表格添加高級(jí)的交互功能。

DataTables中文網(wǎng)
DataTables英文網(wǎng)（資料更多）
IT狗窩

Editor

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

DataTables.AltEditor（免費(fèi)，開源）

DataTables最低兼容版本1.10.8

原作者Github
bug修復(fù)版

提供簡(jiǎn)單的添加、編輯和刪除Buttons，只需要簡(jiǎn)單的設(shè)置即可：

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

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

Bug分析

原作者的AltEditor寫的很好了（愛動(dòng)手造輪子的都是好孩子），在一個(gè)DataTable情況下，沒發(fā)現(xiàn)Bug，如果是初始化了多個(gè)DataTable，其中任意一個(gè)DataTable點(diǎn)擊添加（編輯或刪除），所有DataTable都會(huì)觸發(fā)onAddRow（onEditRow或onDeleteRow），這點(diǎn)我開始沒注意，后來才發(fā)現(xiàn)的。

這個(gè)Bug可是夠大了，于是開始各種找，最后花了兩天各種調(diào)試才找到。

首先點(diǎn)擊添加（編輯或刪除）都會(huì)彈出窗口（div），但是，每個(gè)DataTable彈出的窗口中button都相同，做事件綁定時(shí)就會(huì)把所有相同id的button綁定上這個(gè)事件。也就是說，初始化DataTable很多，一次觸發(fā)次數(shù)也會(huì)很多。

繼續(xù)找問題

以一段代碼為例

$('#altEditor-modal').on('show.bs.modal', function () {
         var btns = '<button type="button" data-content="remove" class="btn btn-default" data-dismiss="modal">關(guān)閉</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" 這個(gè)東西萬年不變。源代碼那些操作提交按鈕都是寫死的ID。

動(dòng)手解決

好了，問題就是id重復(fù)了，那怎么辦？在AltEditor庫中為了區(qū)分不同DataTable，有一個(gè)叫做 namespace 的屬性，一個(gè)叫做 _instance 每綁定一個(gè)DataTable就會(huì)有一個(gè)全局變量自加1，namespace 就是字符串 “.altEditor"+_instance。

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

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

大功告成？

namespace:".altEditor"+_instance，這個(gè)有問題，namespace字符串雖然拼在了id后面，但是因?yàn)榘粋€(gè)點(diǎn)，導(dǎo)致提交事件不觸發(fā)，所以最后應(yīng)該是namespace:“altEditor"+_instance就行了。

部分改造代碼

var btns = '<button type="button" data-content="remove" class="btn btn-default" data-dismiss="modal">關(guān)閉</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ā)中的開源項(xiàng)目：遠(yuǎn)程數(shù)據(jù)調(diào)試

1.png

9.png

小期待

以下項(xiàng)目都是我圍繞遠(yuǎn)程控制寫的項(xiàng)目和子項(xiàng)目。都給star一遍吧。??

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