javascript - 无法使用数据表和免费编辑器编辑/创建/删除表中的元素

Question

我正在尝试通过 AJAX 调用构建一个包含 JSON 格式数据的可编辑表。为此，我将数据表插件与免费数据表编辑器 (kingkode.com/free-datatables-editor-alternative/) 一起使用。我无法使用数据表编辑器，因为我只能使用开源库。

目前，我只是使用自己的 simpleHTTPserver 来提供 JSON，这就是链接指向 localhost 的原因。

表格最初显示正确的数据，但我无法编辑/创建/删除任何元素，因为所选行的值似乎未定义，并且在确认/提交时提供错误。

错误图片:

删除 - 值似乎未定义

创建 - 错误消息

我不明白我错过了什么或做错了什么，所以任何可以让我走上正轨的帮助都会很棒!

脚本:

    $(document).ready(function() {

var columnDefs = [{
    title: "NTP Servers",
    data: "ntp_server"
  }];

//Table creation
var myTable = $('#testTableData').dataTable({
  "ajax": "http://localhost:6112/data.php",
  columns: columnDefs,
    dom: 'Bfrltip',        
    select: 'single',
    responsive: true,
    altEditor: true,     
    buttons: [{
            text: 'Create',
            name: 'add'        
          },
          {
            extend: 'selected', 
            text: 'Edit',
            name: 'edit'        
          },
          {
            extend: 'selected', 
            text: 'Delete',
            name: 'delete'      
          },]
        });
});

HTML:

  <form id="fe">
    <div class="container">

      <h1>Data Table - Network/Time</h1>
      <table class="dataTable table table-striped" id="testTableData">
      </table>

    </div>
  </form>

JSON 数据示例:

{
    "data": [{
        "DT_RowId": 0,
        "ntp_server": "1.openwrt.pool.ntp.org"
    }, {
        "DT_RowId": 1,
        "ntp_server": "2.openwrt.pool.ntp.org"
    }, {
        "DT_RowId": 2,
        "ntp_server": "3.openwrt.pool.ntp.org"
    }]
}

我包含的库:

 <script src="libs/js/jquery.js"></script>
  <script src="libs/js/bootstrap.min.js"></script>
  <script src="libs/js/jquery.dataTables.min.js"></script>
  <script src="libs/js/dataTables.bootstrap.min.js"></script>
  <script src="libs/Buttons-1.2.2/js/dataTables.buttons.min.js"></script>
  <script src="libs/Buttons-1.2.2/js/buttons.bootstrap.min.js"></script>
  <script src="libs/Select-1.2.0/js/dataTables.select.min.js"></script>
  <script src="libs/js/altEditor/dataTables.altEditor.free.js"></script>

Answer 1

我检查了 dataTables.altEditor.free.js 中的代码，发现您确实应该使用数组数组作为数据，否则它将无法工作。所以有两种方法适合您:

1. 重写dataTables.altEditor.free.js的一些部分
2. 重组您的数据，如下所示:http://jsfiddle.net/rmcmaster/bbLjzspf/22/