如何禁用單擊選定的數據表jQuery？

Question

我已經將datatable jQuery與child-row一起使用了。 正常，我選擇了一個主行

$('#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 from來代替datatables示例中顯示的圖標。

 $(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 () {

與其使用其他地方提供的圖像並將其添加到我的項目中，不如使用Font Awesome作為擴展器

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