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

问题描述

我有以下jQuery数据表的代码：

  Contact.DataTable = $（'＃otable'）。DataTable（{ 
ajax：{
url：'/ Contact /'+ Contact.id，
dataSrc：function（check）{
 return check.data; 
}，
}，
响应：true，
列：[
 {data：id}，
 {数据：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（）{//第二列
 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 
 }））
}）
返回选项; 
}））; 
 $（＃category+ data [0]）。val（thiscategoryText）
} 
}）
 
; 
  

在下拉菜单中更改值

  $（'＃otable tbody'）。on（change，.in_edit，function（）{//内联编辑
 var val = $（this） ）; 
 $（this）.parent（td）。empty（）。text（val）; 
 $（'＃otable'）。removeClass（editing）; 
 }）; 
  

下面保存新值的代码（在内联编辑后），同时单击保存：

$ b （click，.saveContact，function（）{
var data = Contact。）
$ b

  $（'＃divsave'）。 DataTable.row（$（this）.closest（'tr'））。data（）; 
 //这里我必须在内联编辑后获得新的值 - 但是变为旧值
}）; 
  

我的问题是：在点击数据中的编辑时，我在行中得到旧值的数据，而不是内联编辑后的修改值

datatable视图 - 1：

datatable - 列中的下拉列表：

我需要什么：点击保存图像保存修改的行 - 目前它在内联编辑之前保存较旧的值（datatable视图 - 1）

解决方案

使用dataTable时，操作DOM < table> 或任何内容通过手 - 你应该经常通过dataTables API。

这是为什么你得到旧值 - 你已经操纵了< table> 的内容，或者似乎 - dataTables不知道这些更改。

在完美的世界中，您应该完全重构设置（即使用API​​），但我想您可以使用 invalidate（） 在更改行时为了刷新dataTables内部：

  $（'＃otable tbody '）.on（change，.in_edit，function（）{//内联编辑
 var val = $（this）.val（）; 
 $（this）.parent（ td）。empty（）。text（val）; 
 
 //添加此行来刷新dataTables内部
 Contact.DataTable.row（$（this）.parent（tr ））。invalidate（）; 
 // 
 
 $（'＃otable'）。removeClass（editing）; 
}）; 
  

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);
                    }
                },
            ]
        } );

Datatable - dropdown - inline edit:

$('#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)
    }
})

;

For changing values in dropdown

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

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

datatable view - 1:

datatable - dropdown in column:

datatable after inline editing:

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

解决方案

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.

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.

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屋！