如何使数据表特定列可编辑？

Question

关于这个主题有各种各样的问题，但我不明白，所以任何人都可以帮助这里是我的 js 代码

 $(document).ready(function () {
    $('#myModal').toggle();
    var List = [];

    $.ajax({
        url: '/urls/' + id,
        type: 'POST',
        dataType: "json",
        data: 'data',
        success: function (data) {
            console.log("data length: ", data.length);
            console.log("data : ", data);

            for (var i = 0; i < data.length; i++) {

                var Logs = {};
                Logs.Info = data[i].Info;
                for (var j = 0; j < Logs.Info.length; j++) {
                    var emplist = {};
                    emplist.Name = Logs.Info[j].Name;
                    emplist.dates = Logs.Info[j].dates;

                    for (var k = 0; k < emplist.dates.length; k++) {
                        var datelist = {};
                        datelist.Name = emplist.Name;
                        datelist.startDate = emplist.dates[k].startDate;
                        datelist.endDate = emplist.dates[k].endDate;
                        List.push(datelist);
                    }
                }

            }


            emptablee = $('#Table').DataTable({
                "data": List,
                "columns": [
                    {"data": "Name"},
                    {"data": "startDate"},
                    {"data": "endDate"},
                ],
                destroy: true,
                "scrollY": "200px",
                "scrollCollapse": true,
                "paging": false
            });
            /*emptablee.destroy();*/
        }

    });
    $("#close").on('click', function () {
        $("#myModal").hide();
    });


});

表中有三列，我想让一个特定的列像单元格一样可编辑，并显示一个输入框并获取编辑后的值以发送。

Answer 1

对于现在检查这一点的任何人，我创建了一个自定义示例，您可以在其中通过从服务器端的元数据请求中发送任何列来编辑任何列。

这里： https : //github.com/sinhashubh/datatable-examples

Answer 2

例如，如果您希望您的 startDate 列是可编辑的，您需要像这样初始化 Datatables，以便您可以按类名点击该列：

{"data": "startDate", "className": "editable"},

然后，通过适当的事件处理

// Activate an inline edit on click of a table cell
$('#Table').on( 'click', 'tbody td.editable', function (e) {
    editor.inline( this );
} );

并初始化编辑器你会很好：

editor = new $.fn.dataTable.Editor( {
    ajax: "../ajax/handle-data.php", // path to back-end data handling
    table: "#Table",
    fields: [ {
            label: "Start Date:",
            name: "startDate"
        }
    ]
} );

另外，不要忘记在文档就绪处理程序之外添加它，因为您需要它作为全局变量：

var editor;

此处的完整示例（请注意，数据表编辑器功能不是免费的） https://editor.datatables.net/examples/inline-editing/columns.html

您还可以编写自己的完全免费版本，稍微复杂一点，不使用编辑器，但仍然使用类名，以便您可以触发特定列的点击事件。