数据表-全行数据编辑器不起作用

Question

我正在尝试数据表的全行编辑器功能。

• 编辑器按钮不出现。
• 没有该编辑器模式将不会显示。

内联编辑器允许列进行编辑，但不会更改列的值。

  

数据表的JS代码。

var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "resources/data/data.txt",
        table: "#NACH-User-Table",
        idSrc:  'id',
        fields: [ {
                label: "User ID:",
                name: "UserID"
            }, {
                label: "Name:",
                name: "Name"
            }, {
                label: "Email ID:",
                name: "emailID"
            }, {
                label: "Role:",
                name: "Role"
            }, {
                label: "Status:",
                name: "Status"
            }
        ]
    } );
 
    $('#NACH-User-Table').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            submit: 'allIfChanged'
        } );
    } );

    $('#NACH-User-Table').DataTable({
        "ajax" :"resources/data/data.txt",
        
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        ordering: true,
        "dom": 'B<"top"fl>rt<"bottom"ip><"clear">',
        button: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
        "columns": [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { "data": "UserID"},
            { "data": "Name" },
            { "data": "emailID"},
            { "data": "Role"},
            { "data": "Status"}
        ]
    });
});

<table id="NACH-User-Table" class="table table-striped table-bordered nowrap" style="width:100%">
              <thead>
                <tr>
                  <th></th>
                  <th>UserID</th>
                  <th>Name</th>
                  <th>Email</th>  
                  <th>Role</th>
                  <th>Status</th>
                </tr>
              </thead>
            </table>

  

包含的库

<script src="./resources/DataTables/jQuery-3.3.1/jquery-3.3.1.min.js"> </script>
    <script src="./resources/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="./resources/DataTables/datatables.min.js"></script>
    <script src="./resources/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
    <script src="./resources/DataTables/DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
    <script src="./resources/DataTables/Buttons-1.5.4/js/dataTables.buttons.min.js"></script>
    <script src="./resources/DataTables/Buttons-1.5.4/js/buttons.bootstrap4.min.js"></script>
    <script src="./resources/DataTables/Buttons-1.5.4/js/buttons.print.min.js"></script>
    <script src="./resources/DataTables/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
    <script src="./resources/DataTables/Responsive-2.2.2/js/responsive.bootstrap4.min.js"></script>
    <script src="./resources/DataTables/Editor-1.8.1/js/dataTables.editor.min.js"></script>
    <script src="./resources/DataTables/Editor-1.8.1/js/editor.bootstrap4.min.js"></script>

还包括所有必需的CSS。