Question

这可能是一个奇怪的问题，不确定是否有人会问同样的事情。我想知道是否可以使dataTable的组开始内容可编辑？

我正在为项目使用dataTable。对于其他页面中的普通dataTable，我可以使tr中的内容可编辑。当我单击铅笔时，可以编辑文本。

我有一个特殊的表，它是rowGroup。下面的函数使我可以对行进行分组，并且所有分组开始都具有一个类名.group-start（背景为灰色）。当我单击.group-start时，下面的行将展开/折叠。渲染时，我在class="to-be-edited"中包含了<i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i>和.append，但是无法启用编辑.group-start的内容。而是，行被扩展。即使我给铅笔的z-index 9999也没有用。

$(function () {

  /* group items by department name
  http://live.datatables.net/beyapupu/1/edit */
  let itemExpandedGroups = {};
  let departmentNameIndex = 2;
  let itemTable = $('#items-table').DataTable({
    'columnDefs': [
      {
        //hide the department name
        'targets': [ departmentNameIndex ],
        // 'visible': false,
      }
    ],
    'paging':   false,
    'pageLength': 1,
    //use department name as the default order
    orderFixed: [[departmentNameIndex, 'asc']],
    rowGroup: {
      dataSrc: departmentNameIndex,
      startRender: function (rows, group) {
        let expanded = !!itemExpandedGroups[group];
        rows.nodes().each(function (r) {
          //collapsed by default
          // r.style.display = 'none';
          // if (expanded) {
          //   r.style.display = '';
          // }
          //expanded by default
        r.style.display = expanded ? 'none' : '';
        });
        // Add category name to the <tr>. NOTE: Hardcoded colspan
        return $('<tr/>')
          .append('<td colspan="8" class="to-be-edited">' + group + ' (' + rows.count() + ')<i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i></td>')
          .attr('data-name', group)
          .css('cursor', 'pointer')
          .toggleClass('expanded', expanded);
      }
    }
  });

  $('#items-table tbody').on('click', 'tr.group-start', function () {
    let name = $(this).data('name');
    itemExpandedGroups[name] = !itemExpandedGroups[name];
    itemTable.draw(false);
  });

})

HTML

<tr data-name="Challahs" class="group group-start" style="cursor: pointer;">
   <td colspan="8" class="to-be-edited">Challahs (2)<i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i>
   </td>
</tr>

这是让我启用编辑的功能（位于单独的js文件中）

$(function () {
  /***
   the following function works for table. The content which to be editable must wrapped within tr.
  example:
  <tr>
    <td><a href="#" class="to-be-edited department-name">custom data</a><i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i></td>
    <td> <a href="#" class="edit-name">Edit Name</a> </td>
  </tr>
  the content must have classname to-be-edited. Followed by <i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i>
  ***/

  //give the buttons correct icons
  $.fn.editableform.buttons =
  '<button type="submit" class="btn btn-primary btn-sm editable-submit">'+
    '<i class="fa fa-fw fa-check"></i>'+
  '</button>'+
  '<button type="button" class="btn btn-default btn-sm editable-cancel">'+
    '<i class="fa fa-fw fa-times"></i>'+
  '</button>';
  //make sure '.to-be-edited' can only toggle by the pencil icon
  $.fn.editable.defaults.mode = 'inline';
  $('.to-be-edited').editable({
    toggle: 'manual'
  })

  $('.pencil-edit-name').on('click', function(e) {
    e.stopPropagation();
    let toBeEdited = $(this).closest('tr').find('.to-be-edited');
    $(toBeEdited).editable('toggle');
    $(this).hide();
  });

  $(document).on('click', '.editable-cancel, .editable-submit', function(){
    $('.pencil-edit-name').show();
  })

});

我也尝试过

$('tr.group-start').on('click', ':not(.pencil-edit-name)', function () {
    let name = $(this).data('name');
    itemExpandedGroups[name] = !itemExpandedGroups[name];
    itemTable.draw(false);
  });

或

$('#items-table tbody').on('click', 'tr.group-start', function () {
    let name = $(this).data('name');
    itemExpandedGroups[name] = !itemExpandedGroups[name];
    itemTable.draw(false);
  }).children().find('.pencil-edit-name').click(function(e) {
    return false;
  });

但是没有用。

jQuery dataTable：是否可以使组开始的内容可编辑？

0 个答案: