数据表Jquery通过单击TR展开/折叠 [英] Datatables Jquery expand / collapse by clicking TR

问题描述

我使用jquery datatables插件，我想通过点击TR展开我的表。

I am using the jquery datatables plugin and i'd like to have my table expand by clicking TR.

他们的网站上有一个示例，通过点击列中的图片进行展开和折叠：

There is an example on their website, which expands and collapses by clicking an image in a column:

http://datatables.net/release-datatables/examples/api/row_details.html

请帮助我修改下面的代码，以便我可以通过点击TR展开/折叠行

Please can someone help me modify the code below, so that I can expand / collapse the row by clicking TR

/* Formating function for row details */
        function fnFormatDetails ( oTable, nTr )
        {
            var aData = oTable.fnGetData( nTr );
            var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
            sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
            sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
            sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
            sOut += '</table>';

            return sOut;
        }

        $(document).ready(function() {
            /*
             * Insert a 'details' column to the table
             */
            var nCloneTh = document.createElement( 'th' );
            var nCloneTd = document.createElement( 'td' );
            nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">';
            nCloneTd.className = "center";

            $('#example thead tr').each( function () {
                this.insertBefore( nCloneTh, this.childNodes[0] );
            } );

            $('#example tbody tr').each( function () {
                this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
            } );

            /*
             * Initialse DataTables, with no sorting on the 'details' column
             */
            var oTable = $('#example').dataTable( {
                "aoColumnDefs": [
                    { "bSortable": false, "aTargets": [ 0 ] }
                ],
                "aaSorting": [[1, 'asc']]
            });

            /* Add event listener for opening and closing details
             * Note that the indicator for showing which row is open is not controlled by DataTables,
             * rather it is done here
             */
            $('#example tbody td img').live('click', function () {
                var nTr = this.parentNode.parentNode;
                if ( this.src.match('details_close') )
                {
                    /* This row is already open - close it */
                    this.src = "../examples_support/details_open.png";
                    oTable.fnClose( nTr );
                }
                else
                {
                    /* Open this row */
                    this.src = "../examples_support/details_close.png";
                    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                }
            } );
        } );

提前感谢。

推荐答案

将此代码放在那里，然后编写一个函数来执行expand / collapse事件。

Put this code in there, then write a function to do the expand/collapse event.

$('#example tbody tr').click( function () {

       $('#example tbody tr').myExpandCollapseFunction();

}

将代码放在此代码后面...

Put the code right after this code ...

    $('#example thead tr').each( function () {
        this.insertBefore( nCloneTh, this.childNodes[0] );
    } );

    $('#example tbody tr').each( function () {
        this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
    } );

这篇关于数据表Jquery通过单击TR展开/折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！