内联编辑 - 保存按钮点击新值 [英] Inline editing - save new values on button click

问题描述

我有以下code jQuery的数据表：

I have following code for jQuery DataTables:

Contact.DataTable = $('#otable').DataTable( {
"ajax": {
                "url" : '/Contact/' + Contact.id,
                "dataSrc": function(check) {
                      return check.data;
                },
             },
            "responsive": true,
            "columns": [
                { "data": "id"},
                { "data": "category", "sClass": "category" },
                { "data": "name", "sClass": "name" },
                { "data": "lname" },
                {
                      "render": function ( data, type, method, meta ) {
                       return Contact.saveContact(method);
                    }
                },
            ]
        } );

数据表 - 下拉 - 联编辑：

$('#otable tbody').on('click', '.category', function () {    //second column
    var row = this.parentElement;
    if(!$('#otable').hasClass("editing")){
        $('#otable').addClass("editing");
        var data = Contact.DataTable.row(row).data();
        var $row = $(row);
         var thiscategory = $row.find("td:nth-child(2)");
        var thiscategoryText = thiscategory.text();
        thiscategory.empty().append($("<select></select>",{
            "id":"category" + data[0],
            "class":"in_edit"
        }).append(function(){
            var options = [];
            $.each(Categories, function(key, value){
                options.push($("<option></option>",{
                    "text":value,
                    "value":value
                }))
            })
            return options;
        }));
        $("#category" + data[0]).val(thiscategoryText)
    }
})

;

有关更改下拉值

$('#otable tbody').on("change", ".in_edit", function(){   //Inline editing
            var val = $(this).val();
            $(this).parent("td").empty().text(val);
            $('#otable').removeClass("editing");
        });

下面code保存新值（联编辑后）并单击保存：

Below code for saving new values(after inline edit) while clicking save:

$('#divsave').on("click", ".saveContact", function() {
        var data = Contact.DataTable.row($(this).closest('tr')).data();
        // Here I have to get new values after inline editing  - but getting old values
    });

我的问题是：当点击编辑，在数据，我联编辑后的数据表，而不是修改后的值该行中年纪大的值

My problem is : while clicking edit, in 'data', I am getting old values in the row of datatable, not the modified value after inline edit

数据表视图 - 1：

datatable view - 1:

数据表 - 下拉列：

datatable - dropdown in column:

在线编辑后的数据表：

datatable after inline editing:

我需要：保存修改后的行，同时单击保存图像 - 目前它保存联编辑之前，旧的值（数据表视图 - 1）

What I need: Save modified row while clicking 'save' image - currently it saves older value before inline editing(datatable view - 1)

推荐答案

在使用数据表它通常是一个非常糟糕的主意来操作DOM ＆LT;表＆gt; 或由手的内容 - 你应该总是通过数据表的API。

When using dataTables it is generally a very bad idea to manipulate the DOM <table> or any content by "hand" - you should always go through the dataTables API.

这就是为什么你得到旧值 - 你操纵的含量＆LT;表＆gt; ，或者看起来是这样 - 数据表都没有意识到这些变化。

Thats why you are getting "old values" - you have manipulated the content of the <table>, or so it seems - dataTables are not aware of those changes.

在一个完美的世界里，你应该彻底重构菜单（即使用API​​），但我想你可以使用的的 无效（） <以刷新数据表内部/ STRONG>的行被改变

In a perfect world you should refactor the setup completely (i.e to use the API) but I guess you can solve the issue by using invalidate() on the row being changed in order to refresh the dataTables internals :

$('#otable tbody').on("change", ".in_edit", function(){   //Inline editing
    var val = $(this).val();
    $(this).parent("td").empty().text(val);

    //add this line to refresh the dataTables internals
    Contact.DataTable.row($(this).parent("tr")).invalidate(); 
    //

    $('#otable').removeClass("editing");
});

这篇关于内联编辑 - 保存按钮点击新值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！