如何禁用點擊選中的數據表jquery？

Question

我已經使用數據表jQuery的子行。正常情況下，我選擇了一個主排，我用

$('#table tbody').on('click', 'tr', function() { 
      if ($(this).hasClass('selected')) { 
       $(this).removeClass('selected'); 
       //do this 
      } 
      else { 
       table.$('tr.selected').removeClass('selected'); 
       $(this).addClass('selected'); 
       //do this 
      } 
     }); 

當使用這個，我點擊任何子行，它一起影響。現在，我想不要點擊子行，我怎麼能做到這一點，使用JavaScript或jQuery？ 看圖片樣本。

Answer 1

我改變行爲，並修正了一些東西，可以追溯到圖像的以DataTables爲例。

玩這個，看看它是否更接近你想要的。它假定一個選擇。如果你在孩子中選擇一行，則父母被選中。

http://live.datatables.net/fowiduzi/3/edit

$(document).ready(function() { 

     var table = $('#example').DataTable({ 
      "data": testdata.data, 
      select: "single", 
      "columns": [ 
       { 
        "className": 'details-control', 
        "orderable": false, 
        "data": null, 
        "defaultContent": '', 
        "render": function() { 
         // Use Font Awesome for the expander in the first cell 
         return '<i class="fa fa-plus-square" aria-hidden="true"></i>'; 
        }, 
        width: "15px" 
       }, 
       { "data": "name" }, 
       { "data": "position" }, 
       { "data": "office" }, 
       { "data": "salary" } 
      ], 
      "order": [[1, 'asc']] 
     }); 

     // Add event listener for opening and closing details 
     $('#example tbody').on('click', 'td.details-control', function() { 
      var tr = $(this).closest('tr'); 
      // get the Font Awesome container 
      var tdi = tr.find("i.fa"); 
      var row = table.row(tr); 

      if (row.child.isShown()) { 
       // This row is already open - close it 
       row.child.hide(); 
       tdi.first().removeClass('fa-minus-square'); 
       tdi.first().addClass('fa-plus-square'); 
      } 
      else { 
       // check to see if the child row exists. 
       // dont want to overwrite it if its already there. 
       if (row.child() && row.child().length > 0) { 
        row.child.show(); 
       } 
       else { 
        // Open this row 
        row.child(format(row.data())).show(); 
       } 
       tdi.first().removeClass('fa-plus-square'); 
       tdi.first().addClass('fa-minus-square'); 
      } 
     }); 

     // Keeps the expander from being selected 
     table.on("user-select", function (e, dt, type, cell, originalEvent) { 
      if ($(cell.node()).hasClass("details-control")) { 
       e.preventDefault(); 
      } 
     }); 

     // If the parent row gets deselected by the user, deselect any 
     // selected child rows 
     table.on("deselect", function (e, dt, type, indexes) { 
      if (type === 'row') { 
       var child = dt.row(indexes[0]).child(); 
       if (child && child.length > 0) { 
        $(child[0]).find(".selected").removeClass("selected"); 
       } 
      } 
     }); 
     $("#example").on("click", ".dt-childtable tr", function() { 
      var tr = $(this).closest("tr"); 
      var childTbl = tr.closest("table"); 
      var parentRow = childTbl.closest("tr").prev(); 

      // see if this row is already selected 
      var isSelected = tr.hasClass("selected"); 
      // remove previous selects from child table 
      childTbl.find(".selected").removeClass("selected"); 
      if (isSelected) { 
       // this is a behavior question do you want the parent row to deselect with 
       // when the child row is. 
       //table.rows(parentRow).deselect(); 
      } else { 
       tr.addClass("selected"); 
       // if the child is selected, make sure the parent is selected but 
       // don't want to trigger a select event if the row 
       // is already so check if selected 
       if (!$(table.row(parentRow).node()).hasClass("selected")) { 
        table.rows(parentRow).select(); 
       } 
      } 

     }); 
    }); 

Answer 2

此代碼可防止在細節控制點擊中選擇/取消選擇行。

它還使用font-awesome而不是數據表示例中顯示的圖標。

$(document).ready(function() { 

    // Normal table definition 
    var table = $('#example').DataTable({ 
     "data": testdata.data, 
     select:"single", 
     "columns": [ 
      { 
       "className": 'details-control', 
       "orderable": false, 
       "data": null, 
       "defaultContent": '', 
       "render": function() { 

而不是使用從其他地方並將其添加到我的項目提供 我用的字體真棒作爲擴展

     return '<i class="fa fa-plus-square" aria-hidden="true"></i>'; 
       }, 
       width:"15px" 
      }, 
      { "data": "name" }, 
      { "data": "position" }, 
      { "data": "office" }, 
      { "data": "salary" } 
     ], 
     "order": [[1, 'asc']] 
    }); 

    // Add event listener for opening and closing details 
    // Note the click event is only on the cell with the details-control class 
    $('#example tbody').on('click', 'td.details-control', function() { 
     var tr = $(this).closest('tr'); 
     var tdi = tr.find("i.fa"); 
     var row = table.row(tr); 

     if (row.child.isShown()) { 
      // This row is already open - close it 
      row.child.hide(); 
      tr.removeClass('shown'); 
      // change the two font awesome icons 
      tdi.first().removeClass('fa-minus-square'); 
      tdi.first().addClass('fa-plus-square'); 
     } 
     else { 
      // Open this row 
      row.child(format(row.data())).show(); 
      tr.addClass('shown'); 
      tdi.first().removeClass('fa-plus-square'); 
      tdi.first().addClass('fa-minus-square') 
     } 
    }); 

    // This event handler prevents the details-control from changing the select row from occurring 
    table.on("user-select", function (e, dt, type, cell, originalEvent) { 
     if ($(cell.node()).hasClass("details-control")) { 
      e.preventDefault(); 
     } 
    }) 
});