Datatables Jquery развернуть / свернуть, нажав TR - PullRequest
Новая
       9

Datatables Jquery развернуть / свернуть, нажав TR

0 голосов
/ 19 июня 2011

Я использую плагин jquery datatables, и я хотел бы расширить свою таблицу, нажав 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 Ответ

2 голосов
/ 19 июня 2011

Поместите этот код туда, затем напишите функцию для выполнения события раскрытия / свертывания. 

$('#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] );
    } );
...