数据表激活单个单元格编辑onclick [英] Datatable activate single cell editing onclick

问题描述

我无法在此处使用jQuery数据表插件:

I was unable to utilize the jQuery datatable plugin here:

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

我一直遇到错误，所以我放下了它，决定自己做.

I kept getting an error, so I just dropped it and decided to do it myself.

从数据表开始:

$.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"，它是不可见的.

Within COLUMN2, you should see a class 'checkBound' which is visible when the page loads. There is also an input class 'editbound' which is not visible.

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

Here is the function that is supposed to hide class 'checkBound' and then display class '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();
});

使用上述方法，完成页面加载后，将毫无问题地显示数据表.

Using the above, when the page is finished loading, the datatable is displayed with no problem.

在单击类为"checkBound"的单元格之一以显示输入类"editbound"时，输入会显示自身，但也会显示列中的所有其他单元格.

Upon clicking one of the cells with class 'checkBound' to display the input class 'editbound', the input does display itself, but it also displays every other cell in the column.

点击前

点击后:

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

As you can see, the first cell in the BOUND column is the cell that was clicked. But when clicked, the rest of the cells were activated. I want to prevent this from happening.

我该如何进行这项工作?

How can I make this work?

推荐答案

这是我(某种程度上)解决我的问题的方式.在datatable部分中，我添加了一个名为VOYID的ID字段，并将该ID包含在href和输入中的类中:

This is how I (somewhat) solved my problem. In the datatable section, I added an ID field called VOYID and included that ID with the class in the href and the input:

"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来检查确切的类.这样，当您单击链接时，只会打开唯一的类，而不会打开列中的所有单元格:

Then down in the button click section, I utilized the rowData to check for the exact class. This way, when you click the link, only the unique class will open and not all of the cells in the column:

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

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

Now, when I click on the link, it is only that cell that gets the input activated:

这篇关于数据表激活单个单元格编辑onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！