Question

我需要在表格中添加一个可编辑的列。这是我目前如何创建表。数据来自Javascript数组，并且正在改变（这就是我在表定义中'destroy：true'的原因）。我希望QTY列的默认值为1，但允许用户输入自己的号码 - 然后我需要能够在提交表单时检索该值。

var table2 = $('#example').DataTable( {
    select: false,
    data: addedRows,
    destroy: true, 
    columns: [
    { title: "ID" },
    { title: "Name" },
    { title: "Position" },
    { title: "Office" },
    { title: "Extn." },
    { title: "Start date" },
    { title: "Salary" },
    { title: "QTY" }
    ],
    "columnDefs": [{
        className: "ID",
        "targets":[0],
        "visible": false,
        "searchable":false
    }],
    "language": {
        "emptyTable":     "Select items from the table above"
    }
});

任何人都可以帮助我吗？既可以创建可编辑的列，也可以在提交时获取数据？

由于

Answer 1

有两个选项：

使用datatables插件https://editor.datatables.net/（它不是免费的）
表格中已有inputs

像这样：

<table id="example">
    <tbody>
        <tr>
            <td><input type="text" value="value1" name="name1"></td>
            <!-- more cells-->
        </tr>
        <tr>
            <td><input type="text" value="value2" name="name2"></td>
            <!-- more cells-->
        </tr>
    </tbody>
</table>

然后数据表将具有inputs。提交时，您必须阅读变量name1 ... name#

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();
        }
    });

DataTables，添加可编辑列

2 个答案: