Datatables Jquery 通过单击 TR 展开/折叠

Posted 2023-05-07

【中文标题】Datatables Jquery 通过单击 TR 展开/折叠

【英文标题】：Datatables Jquery expand / collapse by clicking TR

【发布时间】：2011-09-18 00:09:46

【问题描述】：

我正在使用 jquery 数据表插件，我想通过单击 TR 来扩展我的表。

他们的网站上有一个示例，通过单击列中的图像来展开和折叠：

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

请有人帮我修改下面的代码，以便我可以通过单击 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' );
                
             );
         );

提前致谢。

【参考方案1】：

把这段代码放在那里，然后写一个函数来做展开/折叠事件。

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

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

把代码放在这段代码后面...

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

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

【讨论】：

使用“live”比“click”更好，因为它不会绑定事件。它在一张大桌子上变得很重要。