1

私は datatables プラグインを使用していますが、現在、td の画像をクリックするとコードが展開/折りたたまれますが、行をクリックして展開できるようにしたいと考えています。コードは次のとおりです。

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

次に、展開と折りたたみをスムーズなアニメーションにしたいのですが、その方法を教えてもらえますか?

ありがとう

4

3 に答える 3

2

新しい行コード内に div がある場合は、次のことができます。私の新しい行には、innerDetails のクラスを持つ div があります。これが私がしたことです：

jquery.dataTables.js の 5648 行目は次のとおりです。

$(nNewRow).insertAfter(nTr);

次のように変更します。

var innerDetails = $(nNewRow).find('div.innerDetails');
innerDetails.css('display', 'none');
$(nNewRow).insertAfter(nTr);
innerDetails.slideDown();

これは、箱から出してすぐに使用できる方法です。

于 2012-04-17T01:28:59.860 に答える
0

質問の最初の部分について：

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

2 番目の部分ではthis.fnOpen = function( nTr, sHtml, sClass )、jquery.dataTables.js を見つけて、fnOpen メソッド内で次の行を見つけます。

$(nNewRow).insertAfter(nTr);

これを次のように変更します。

$(nNewRow).css('display','none').insertAfter(nTr).slideDown();

または、選択したアニメーションが何であれ。

これはテストされていませんが、そのようなものは間違いなく機能します。

于 2011-06-10T15:44:27.447 に答える