Data Table主行选中状态保持及子行不可选中问题求助

问题1：展开/折叠子行时主行选中状态丢失 #

点击展开/折叠按钮时，事件冒泡会触发行选中逻辑的冲突，导致选中状态被重置。通过阻止事件冒泡即可解决：

修改子行展开/折叠的事件处理函数，添加event.stopPropagation()：

// Open/close child row
table.on('click', 'td.details-control', function(event) {
   // 阻止事件冒泡，避免触发行选中逻辑
   event.stopPropagation();
   var td = $(this);
   var row = table.row(td.closest('tr'));
   if (!row.child.isShown()) {
      row.child(format(row.data())).show();
      td.html(", quote(symbol_minus), ");
   } else {
      row.child.hide();
      td.html(", quote(symbol_plus), ");
   }
});

如果你的行选中依赖DataTables的select插件，还可以主动保留主行选中状态：

table.on('click', 'td.details-control', function(event) {
   event.stopPropagation();
   var td = $(this);
   var row = table.row(td.closest('tr'));
   // 记录当前主行的选中状态
   var isSelected = row.selected();
   if (!row.child.isShown()) {
      row.child(format(row.data())).show();
      td.html(", quote(symbol_minus), ");
   } else {
      row.child.hide();
      td.html(", quote(symbol_plus), ");
   }
   // 恢复主行的选中状态
   if (isSelected) {
      row.select();
   }
});

问题2：设置子行不可被选中 #

DataTables生成的子行默认带有dt-child类，可通过以下两种方式实现子行不可选中：

方法1：CSS禁用子行交互 #

直接通过样式阻止子行的鼠标交互：

tr.dt-child {
   pointer-events: none;
   cursor: default;
}

方法2：JS拦截子行选中操作 #

在选中事件中判断行类型，取消子行的选中：

table.on('select.dt deselect.dt', function(e, dt, type, indexes) {
   if (type === 'row') {
      indexes.forEach(function(index) {
         var row = dt.row(index);
         // 若为子行则取消选中
         if (row.node().classList.contains('dt-child')) {
            row.deselect();
         }
      });
   }
});

也可以在初始化DataTables时，通过select选项直接限定可选中行：

$('#your-table').DataTable({
   select: {
      // 仅选择非子行的行
      selector: 'tr:not(.dt-child)'
   }
});

内容的提问来源于stack exchange，提问作者Emil