前端：多个datatables用dataTables.altEd

前言

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

DataTables中文网
DataTables英文网（资料更多）
IT狗窝

Editor

Editor是官方提供的表格编辑宽展组件。
优点：一大堆；
缺点：付费，破解版一般是老版本
今天主角不是官方的组件，所以跳过。

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触发事件
      },
      onDeleteRow: function (datatable, rowdata, success, error) {
         /点击删除Button触发事件
      },
      onEditRow: function (datatable, rowdata, success, error) {
          //点击编辑Button触发事件
      }
    })

Bug分析

原作者的AltEditor写的很好了（爱动手造轮子的都是好孩子），在一个DataTable情况下，没发现Bug，如果是初始化了多个DataTable，其中任意一个DataTable点击添加（编辑或删除），所有DataTable都会触发onAddRow（onEditRow或onDeleteRow），这点我开始没注意，后来才发现的。

这个Bug可是够大了，于是开始各种找，最后花了两天各种调试才找到。

首先点击添加（编辑或删除）都会弹出窗口（div），但是，每个DataTable弹出的窗口中button都相同，做事件绑定时就会把所有相同id的button绑定上这个事件。也就是说，初始化DataTable很多，一次触发次数也会很多。

继续找问题

以一段代码为例

$('#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库中为了区分不同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后面，但是因为包含一个点，导致提交事件不触发，所以最后应该是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);
      }

开发中的开源项目：远程数据调试

1.png
9.png

小期待

以下项目都是我围绕远程控制写的项目和子项目。都给star一遍吧。😍

项目(Github)	语言	其他地址	运行环境	项目说明
RemoteDataControllerForWeb	JavaScript	简书	浏览器	远程数据调试控制台Web端
RemoteDataControllerForAndroid	Java	简书	Android设备	远程数据调试Android端
RemoteDataControllerForServer	Java	简书	运行Java的设备	远程数据调试Server端
MiniHttpClient	Java	简书	运行Java的设备	精简的HttpClient
MiniHttpServer	Java	简书	运行Java的设备	支持部分Http协议的Server
MiniTCPClient	Java	简书	运行Java的设备	TCP长连接库，支持粘包拆包处理
PackageMessage	Java	简书	运行Java的设备	TCP粘包与半包解决方案
ByteBuffer	Java	简书	运行Java的设备	二进制处理工具类
DataTables.AltEditor	JavaScript	简书	浏览器	Web端表格编辑组件

我的小站：IT狗窝
技术联系QQ:1264957104