数据表激活单单元格编辑onclick答案

【问题标题】：Datatable activate single cell editing onclick数据表激活单单元格编辑onclick
【发布时间】：2019-05-02 21:15:57
【问题描述】：

我无法在这里使用 jQuery 数据表插件：

https://editor.datatables.net/examples/inline-editing/simple

我一直收到错误，所以我放弃了它并决定自己做。

从数据表开始：

$.ajax({
  url: 'api/searchVoyageInfo.php',
  type: 'POST',
  data: '',
  dataType: 'html',
  success: function(data, textStatus, jqXHR){
    var jsonObject = JSON.parse(data); 
    var table = $('#example1').DataTable({
      "data": jsonObject,
      "columns": [{ 
        { "data": "COLUMN1" },  
        { 
          "data": "COLUMN2",
          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
          {
            $(nTd).html("<a href='#' class='checkBound'>"+oData.COLUMN2+"</a>
                         <input type='text' class='editbound' 
                         id='editbound' data-uid='"+oData.VOYID+"' 
                         data-editbound='"+oData.COLUMN2+"' value='"+oData.BOUND+" 
                         display: none;' />");
          }
        },
        { "data": "COLUMN3" },
        // few more columns
      }],
      "iDisplayLength": 50,
      "paging": true,
      "bDestroy": true,
      "autoWidth": true,
      "dom": 'Bfrtip',
       "buttons": [
        // some extend buttons
      ]
    });
  },
  error: function(// some stuff){
    // do some other stuff
    // this part is not important
  }
});

在 COLUMN2 中，您应该会看到一个在页面加载时可见的“checkBound”类。还有一个不可见的输入类“editbound”。

这是应该隐藏类'checkBound'然后显示类'editbound'的函数：

$('#example1').on('click', 'tr > td > a.checkBound', function(e)
{
  e.preventDefault();
  var $dataTable = $('#example1').DataTable();
  var tr = $(this).closest('tr');
  var data = $dataTable.rows().data();
  var rowData = data[tr.index()];

  $('.checkBound').hide();
  $('.editbound').show();
});

使用上述方法，页面加载完成后，数据表显示没有问题。

单击具有“checkBound”类的单元格之一以显示输入类“editbound”时，输入会显示自身，但它也会显示列中的所有其他单元格。

点击前：

点击后：

如您所见，BOUND 列中的第一个单元格是被点击的单元格。但是当点击时，其余的单元格被激活了。我想防止这种情况发生。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript php jquery datatable inline-editing

【解决方案1】：

这就是我创建带有按钮的列的方式。你应该可以做类似的而不是按钮！

fields: [
    { name: "column_id", title:"View" ,itemTemplate: function(value) {
                    return $("<button>").text("buttontitle")
                            .on("click", function() {
                         //do something
                          return false;
                        });

                  }]

【讨论】：

我在哪里应用这个代码？在数据表部分，还是按钮点击部分？
这个答案很有希望，但我无法让它发挥作用。

【解决方案2】：

这就是我（在某种程度上）解决问题的方法。在数据表部分，我添加了一个名为 VOYID 的 ID 字段，并将该 ID 包含在 href 和输入中的类中：

"data": "COLUMN2",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
{
   $(nTd).html("<a href='#' class='checkBound"+oData.VOYID+"' id='checkBound'>"+oData.COLUMN2+"</a>
                <input type='text' class='editbound"+oData.VOYID+"' 
                id='editbound' data-uid='"+oData.VOYID+"' 
                data-editbound='"+oData.COLUMN2+"' value='"+oData.BOUND+" 
                display: none;' />");
}

然后在按钮单击部分，我使用 rowData 来检查确切的类。这样，当您单击链接时，只会打开唯一的类，而不是列中的所有单元格：

$('#example1').on('click', 'tr > td > a.checkBound', function(e)
{
  e.preventDefault();
  var $dataTable = $('#example1').DataTable();
  var tr = $(this).closest('tr');
  var data = $dataTable.rows().data();
  var rowData = data[tr.index()];

  var voyid = rowData.VOYID;

  $('.checkBound'+voyid).hide();
  $('.editbound'+voyid).show();
});

现在，当我点击链接时，只有那个单元格会激活输入：

【讨论】：