Table 单击行时排序器打开子行

Question

当您单击行内的值时，我在下面发布的代码会显示一个子行，在此示例中为 colindex of 2。

我想知道有什么方法可以让同样的事情发生，但是当你点击该行的任意位置时。我不确定该怎么做。我创建 table 的方法是使用 tablesorter 和 php 查询。 table 的显示工作正常，我只是在查找有关在单击某行而非值时显示子行的文档时遇到问题。

我的PHP:

<?php
    foreach($report_tabs as $report) {
        $tag=$report["tag"];
        $title=$report["title"];
        $hcols=$report["hdrcols"];
        $cols=$report["datacols"];
        $db_query=$report["dbquery"];

        echo "<div id='my_test_table_tab' class='tab-pane active'>";
            echo "<table id='test_table' class='table table-hover tablesorter'>";
                echo "<thead>";
                    echo "<tr>";
                            // removed the hard coded column headers and took the ones from our query
                            global $hcols;
                            foreach($hcols as $column_header) {
                                echo "<th>$column_header</th>";
                            }
                    echo "</tr>";
                echo "</thead>";
                echo "<tbody>";
                        //Use queried data to create each row of the table
                        $rowcount=0;
                        //Creating checker health table & filling with data
                        if ( isset($db_query)) {
                            while($row = mysqli_fetch_array($db_query)) {
                                $rowcount++;
                                // removed the hard coded column set and made it driven off of the array below
                                echo "<tr>";
                                $colindex = 0;
                                foreach( $cols as $column_name ) {
                                    $val = $row[$column_name];
                                    if ($colindex == 2) {
                                        echo "<td style='text-align: left;  width: 1pt;'><a href='#' class='toggle' onClick='drawChart(\"$val\");'>$val</a></td>";
                                        $tempval = $val;
                                    } else {
                                        echo "<td style='width:100pt; text-align='right'>$val</td>";
                                    }
                                    $colindex++;
                                }
                                echo "</tr>";
                                echo "<tr class='tablesorter-childRow'>";
                                    echo "<td colspan='3'>";
                                        echo "<div id='$tempval' style='height: 400px;'></div>";
                                        echo "<div id='fail$tempval' style='height: 400px;'></div>";
                                    echo "</td>";
                                echo "</tr>";
                            }
                        }
                echo "</tbody>";
            echo "</table>";
            echo "<h4>$rowcount rows retrieved</h4>";
        echo "</div>";
    }
?>

我的 TableSorter 函数根据值点击打开：

<script>
// Table Sorter Options
$(document).ready(function(){
    // Turns all tables with the 'tablesorter' class into tablesorter tables with the given widgets
    $(".tablesorter").tablesorter({
        // stickyHeaders - Keeps headers always visible when scrolling down
        // filter - Adds filter boxes to each column
        cssChildRow : "tablesorter-childRow",
        widgets: ['stickyHeaders','filter'],
        widgetOptions: {
            stickyHeaders_offset : 50,
            filter_placeholder : {search : ''},
            filter_saveFilters: true,
            pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
            pager_removeRows: false,
            filter_childRows  : true,
            filter_cssFilter  : 'tablesorter-filter',
            filter_startsWith : false,
            filter_ignoreCase : true
        },
    });
    // Clear buttons
    add_clear_buttons();

    var table = $( '#my_test_table_tab' );

    // hide child rows
    table.find( '.tablesorter-childRow td' ).addClass( 'hidden' );

    // Toggle child row content (td), not hiding the row since we are using rowspan
    table.delegate( '.toggle', 'click' ,function() {
    // use "nextUntil" to toggle multiple child rows
    // toggle table cells instead of the row
    $( this )
        .closest( 'tr' )
        .nextUntil( 'tr.tablesorter-hasChildRow' )
        .find( 'td' )
        .toggleClass( 'hidden' );
    return false;
    });

    // Toggle filter_childRows option
    $( 'button.toggle-combined' ).click( function() {
        var widget_options = table[0].config.widgetOptions,
        options = !widget_options.filter_childRows;
        widget_options.filter_childRows = options;
        $( '.state1' ).html( options.toString() );
        // update filter; include false parameter to force a new search
        table.trigger( 'search', false );
        return false;
    });
});
</script>

Answer 1

您需要做的就是更改 delegate 函数（为什么要使用如此旧版本的 jQuery？），指向行而不是 link.

table.delegate( '.tablesorter-hasChildRow', 'click' ,function() {

我设置了 this demo，它使用更新版本的 jQuery - delegate 函数已被弃用，因此请改用 on：

$table.on('click', '.tablesorter-hasChildRow', function() {

Table 单击行时排序器打开子行

Table Sorter Open Child Row on row click

php

tablesorter