Datatable активирует редактирование одной ячейки по клику

Мне не удалось использовать плагин данных 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 datatable jquery inline-editing
person John Beasley    schedule 02.05.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вот как я создал столбец с кнопкой в ​​нем. Вы должны иметь возможность делать подобное вместо кнопки!

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

                  }]
person zod    schedule 02.05.2019
comment
Где применить этот код? В разделе с данными или в разделе нажатия кнопок? - person John Beasley; 03.05.2019
comment
Этот ответ был многообещающим, но я не смог заставить его работать. - person John Beasley; 06.05.2019

arrow_upward
0
arrow_downward

Вот как я (несколько) решил свою проблему. В разделе с данными я добавил поле идентификатора с именем VOYID и включил этот идентификатор в класс в 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();
});

Теперь, когда я нажимаю на ссылку, активируется только эта ячейка:

введите здесь описание изображения

person John Beasley    schedule 06.05.2019