1

テーブルに各行のチェックボックス列と、ホバー時に強調表示する行を持たせようとしています。データがhtmlファイルで静的に宣言されている場合は適切に機能しますが、サーバーからデータを取得すると($.getJSONを使用しています)、ソートが混乱し、ハイライトが機能しなくなります。

また、テーブルの各行にこのメッセージが表示されます。

DataTables 警告: 行 0 のデータ ソースから不明なパラメーター '5' を要求しました

これが私のコードです：

$(function () 
{
    var oTable;
    var tRow; 

    var checkboxIdsArray = new Array();
    var allChecked = false;

        // To generate the checkbox for each row
        var nCloneTh = document.createElement('th');
    var nCloneTd = document.createElement('td');
    nCloneTd.innerHTML = '<input type="checkbox" id="op_checkbox" />';
        nCloneTd.className = "center";

    // Deal with the checbox selection  
    $('#op_checkbox').live('click', function()
    {
        var operatorId = $(this).parents('tr').attr('id');
    });

    $('#example thead tr').each(function () 
    {
        this.insertBefore(nCloneTh, this.childNodes[0]); // Add the header before the first header
        });

    // Instantiate the DataTable
    oTable = $('#example').dataTable({"aaSorting": [[ 0, "asc" ]]});

    $.getJSON('../../controller/UserController.php/getUsers',
    function(data)
    {
        $.each(data, function(i, item)
        {
            oTable.fnAddData(
                [
                    item.idUser,
                    item.nameUser,
                    item.telephoneUser,
                    item.cnpjUser,
                    item.inscEstUser
                ]
            );
        });

        $('#example tbody tr').each(function () 
            {
                this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]); // Add the checkbox to the td's
            });
    });

    // Deals with the highlight of the rows 
    $('#example tbody tr').hover(function() 
        {
            tRow = this; 
            $(this).children().addClass('highlighted');
        }, 
        function() 
        {
            var nTrs = oTable.fnGetNodes();
            $(tRow).children().removeClass('highlighted');
        } 
    );

    // Deals with the export options
    var oTableTools = new TableTools( oTable, 
    {
            "aButtons": 
            [
                {
                    "sExtends":    "div",
                    "sButtonText": "Hello world"
                }
            ]
    });

    $('#demo').before( oTableTools.dom.container );

        // Deals with the check all button click
    $('#checkall_link').live('click', function()
    {
        var i = 0; 
        if(!allChecked)
        {
            $(oTable.fnGetNodes()).each(function()
            {
                allChecked = true;
                $('#checkall_link').text('Uncheck all');
                this.childNodes[0].childNodes[0].checked = true; // Set all checkbox to checked
                checkboxIdsArray[i] = this.childNodes[0].childNodes[0].id; // Store the current checkbox id the checkboxIds array
                i++; 
            });
        }
        else
        {
            $(oTable.fnGetNodes()).each(function()
            {
                allChecked = false;
                $('#checkall_link').text('Check all');
                this.childNodes[0].childNodes[0].checked = false; // Set all checkbox to checked
                checkboxIdsArray = [];
                console.log(checkboxIdsArray);
            });
        }
    });

    $('#manage_del').click(function()
    {
        if($(this).attr('class') == 'disabled')
        {
            alert("disabled");          
        }
        else
        {
            alert("enabled");
        }
    });

    $('#manage_new').click(function()
    {
        if($(this).attr('class') == 'disabled')
        {
            alert("disabled");          
        }
        else
        {
            alert("enabled");
        }
    });
});

これが私のテーブルの外観です。http://imgur.com/gpiu8

右側の矢印でわかるように、別の列が作成されます (おそらくチェックボックスが追加されているため)。また、左矢印で 2 番目の列が強調表示されていることがわかりますが、チェックされたヘッダーは 1 番目です (チェックボックス付き) ）。行にカーソルを合わせると、強調表示されません。

どんな助けでも大歓迎です。ありがとう。

アップデート

現在は delegate() を使用していますが、まだ機能していません。

// Deals with the highlight of the rows 
$('#example tbody').delegate('tr', 'hover', function() 
{
    tRow = this; 
    $(this).children().addClass('highlighted');
}, 
function() 
{
    var nTrs = oTable.fnGetNodes();
    $(tRow).children().removeClass('highlighted');
});
4

1 に答える 1

2

私はデリゲートを個人的に使用します（主に、動的コンテンツでホバーの例が機能しなかったためです）

デリゲートの使用方法を示すコードの例を次に示します。

サムネイル リストの設定例:

<ul>
    <li>
        <img src="http://www.dummyimage.com/64x64/000/fff" />
        <p>some title text</p>            
    </li>
</ul>​


// attach the handler via delegate()
$(document).delegate("li", "hover", function() { // this works because the delegate function looks for all li's that are children to the document.
    $(this).children('p').fadeToggle("fast");
});

// after you've attached the handler create some elements.
setTimeout(function() {
    var list = $('ul'),
        node = list.children('li'),
        i = 25;
    while (i) {
        list.append(node.clone());
        i--;
    }
}, 1000);​

ライブデモ

于 2012-06-22T17:06:03.920 に答える