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

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

我创建了一个编辑列的函数。但是首先，您需要为列的data-id添加id，并将类edit-tr添加到可编辑的列。当您按下输入按钮时，列数据将保存到数据库中。

这是代码：

var getId;
    var putOldValueBack;
    $(document).on("click","tr.odd td.edit-tr",function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $this = $(this);
        if ($this.data('editing')) return;
        var val = $this.text();
        getId = $(this).data("id");
        $this.empty();
        $this.data('editing', true);
        $('<input type="text" class="form-control editfield">').val(val).appendTo($this);
    });

    putOldValueBack = function () {
        $("tr.odd .editfield").each(function(){
            $this = $(this);
            var val = $this.val();
            var $td = $this.closest('td');
            $td.empty().html(val);
            $td.data('editing', false);
            $.ajax({
                url: "YOUR URL TO SAVE THE DATA",
                type: 'post',
                data : {id:getId,mentioned:val}, // add the param
                dataType: 'json'
            });
        });
    };

    $(document).click(function (e) {
        putOldValueBack();
    });

    $(document).on('keypress',function(e) {
        if(e.which == 13) {
            putOldValueBack();
        }
    });