1

行のリストにDataTablesを使用しています。最近、データテーブルにContextMenuプラグインを実装して、ユーザーが任意の行を右クリックして、行の編集、行の削除などのコンテキスト オプションを選択できるようにしました。

以下は、DataTable に ContextMenu を実装するために使用されるコードです。

$('#dtPOL').dataTable({
  "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    $(nRow).contextMenu({
        menu: 'cntxtmnuDataTable'
    },
    function (action, el, pos) {
        if (action != '') {
            alert('You selected: ' + action);
        }
        return true;
    });
  }
});

これに加えて、 Drill-down rowsで説明されているように、DataTable にドリルダウン機能も実装しました。これは、問題なく非常にうまく機能します。コードは次のとおりです。

$('#dtPOL tbody td').live('click', function () {
    var nTr = this.parentNode;
    var i = $.inArray(nTr, anOpen);

    if (i === -1) {
        $('img', this).attr('src', gImageURL + "b-qv-hide.png");
        var nDetailsRow = oTable.fnOpen(nTr, fnQuickView(oTable, nTr), 'quickView');
        $('div.innerDetails', nDetailsRow).slideDown();
        anOpen.push(nTr);
    }
    else {
        $('img', this).attr('src', gImageURL + "b-qv-show.png");
        $('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
            oTable.fnClose(nTr);
            anOpen.splice(i, 1);
        });
    }
});

上記のコード スニペットで呼び出される関数は次のとおりです。

function fnQuickView(oTable, nTr) {
    var aData = oTable.fnGetData(nTr);
    var sOut = '<div class="innerDetails">';
    sOut += '<table cellpadding="5" cellspacing="0" border="0">';
    sOut += '<tr><td>Detailed Description:</td><td>:</td><td>' + aData[2] + '</td></tr>';
    sOut += '</table>';
    sOut += '</div>';

    return sOut;
}

ここで、ContextMenu を呼び出すと問題が発生します。私が行ったように、ドリルダウン機能が機能しなくなりました。デバッグ時に、ContextMenu が呼び出された後、TD.control のクリック イベントがまったく発生しないことがわかりました。

DataTable フォーラムと Google で検索してみましたが、役に立ちませんでした。確かに、私は何かが欠けています。私はすでに4日以上費やしていますが、まだ成功していないので、親切に助けてください. よろしくお願いします。

4

1 に答える 1

1

問題は本当にcontextMenuプラグインにあります....Webページのすべての要素ですべての.clickイベントをバインド解除します...ドキュメントの.clickイベントをバインド解除する.jsファイルのすべてのステートメントをコメントアウトするだけです...このトリックはうまくいきました自分...

于 2013-01-10T16:59:29.847 に答える