3

jQuery UI ダイアログ内のテーブルで DataTables 'TableTools' プラグインを使用しようとしています。これらはダイアログの外では正常に機能しますが、内部では機能する唯一のボタンは [印刷] です。

問題をデモするjsFiddleは次のとおりです。 http://jsfiddle.net/Yd3PT/31/

何か案は？

4

3 に答える 3

3

私は同じ問題を抱えており、上記の解決策はうまくいきませんでした。TableTools ボタンは DataTable (モーダル) に表示されますが、リンクをクリックしたときのアクションはありません。

<!-- source modal -->
<div id="source-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="source-modalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  </div>
  <div class="modal-body">
    <table id="source-modal-table" class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th>Heading1</th>
          <th>Heading2</th>
          <th>Heading3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="data1"></td>
          <td class="data2"></td>
          <td class="data3"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div><!-- source modal -->

<script>
  // defines DataTable and TableTool with swf
  var oTable2 = $('#source-modal-table').DataTable({
    "aoColumns": [
       null, null, null, null, null, null 
    ],
    "sDom": 'T<"clear">lfrtip',
    "oTableTools": {
      "sSwfPath": "/Assets/images/copy_csv_xls_pdf.swf"
    }
  });    

  // open modal for source
  $("#source-modal").modal('show');

  // ensures TableTools works in modal (DOES NOT WORK)
  $('#source-modal').dialog({
    modal: true,
    zIndex: 1
  });
</script>

TableTools のボタン リストに明らかな変更はないようです。swf ファイルをどこかで再定義する必要があると思いますが、場所がわかりません。

于 2014-03-06T17:10:50.047 に答える
2

Obbi の功績ですが、今後の参考のために (このスレッドは見つけやすかったです)。

http://datatables.net/forums/discussion/9480/tabletools-export-buttons-do-nothing-in-ie-or-chrome-in-jquery-ui-modal-updated-fixed/p1

「私はそれをすべて間違って見ていたことが判明しました。JQuery UI にはバグがあり、モーダルで実行すると、デフォルトの z-index が原因で特定の要素からクリック関数が削除されます。」

つまり、$("#datatableDiv").dialog({ 高さ: 500、幅: 1000、モーダル: true、zIndex: 1 });

于 2013-02-20T15:07:42.207 に答える