表排序器打开子行在行上单击

时间:2018-07-25 19:56:30

标签: php tablesorter

我下面发布的代码在您单击行内的值时显示了一个子行,在本示例中为colindex of 2

我想知道如何使相同的事情发生,但是当您单击行上的任何位置时。我不确定如何执行此操作。我创建表的方式是使用tablesorter和php查询。该表的显示工作正常,我只是在查找文档时遇到问题,即单击某行而不是单击该值时显示子行。

我的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>

1 个答案:

答案 0 :(得分:1)

您需要做的就是更改delegate函数(为什么要使用这种旧版本的jQuery?),使其指向行而不是链接。

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

我设置了this demo,它使用的是jQuery的较新版本-delegate函数已被弃用,因此请使用on

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