1

dynatable.js http://www.dynatable.com/と bootstrap3 モーダルを使用して、並べ替え可能なテーブル内のリンクがクリックされたときにマップを表示しています。

この問題に関するヘルプを探しています。最初にページを読み込んで [場所] リンクをクリックすると、モーダル データとリモート データが表示されて正常に動作し、場所の地図が適切に読み込まれます。ただし、ページを読み込んで列の 1 つをクリックしてテーブルを並べ替えると (たとえば、item# 列をクリックしてアイテム番号で並べ替えるとします)、場所のリンクをクリックすると、読み込み中のテキストがモーダルに表示されますが、 [data-load-remote].on('click') はまったくトリガーされません。これが発生しても、エラーやコンソール メッセージは表示されません。

列をソートした場合にのみ発生します。ページを読み込んで、列の並べ替えをクリックしないと、すべて正常に動作します。

テーブル

<table id="inventory-table" class="table">
<thead>
    <tr>
     <th>Item #</th>
     <th class="hidden-xs">Location</th>
    </tr>
</thead>
<tbody>
<tr>
 <td>1234</td>
 <td><a href="#myModal" role="button" data-toggle="modal" data-load-remote="/item-location/4" data-remote-target="#myModal . modal-body">555 W. Test St.</a></td>
</tr>
</tbody>
</table>

ブートストラップモーダル

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body bg-gray-lighter">
            <p>Loading...</p>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
$( document ).ready(function() {
    $('#inventory-table').dynatable({
    dataset: {
        perPageDefault: 20,
        perPageOptions: [20, 30, 50, 100]
    }
    });

   $('[data-load-remote]').on('click',function(e) {
       e.preventDefault();
       var $this = $(this);
       var remote = $this.data('load-remote');

       if(remote) {
           $($this.data('remote-target')).load(remote);
       }

       $(".modal-body").html('<p>Loading...</p>');
  });

  $('#dynatable-query-search-inventory-table').addClass('form-control');
  $('#dynatable-per-page-inventory-table').addClass('form-control selectperpage');</script>
4

1 に答える 1

1

Dynatable が機能する方法は、テーブルに入力されるデータを表す JSON コレクションに対して操作を実行することです。つまり、クリックして列を並べ替えると、Dynatable は JSON コレクションを並べ替えます。この場合は次のようになります。

["item-#": 1234, "location": "555 W. Test St."]

次に、並べ替えが完了すると、テーブル本体の HTML が再描画されます。したがって、おそらく何が起こっているかというと、テーブル本体の HTML をページに再描画すると、リンクや、JavaScript 関数がクリック イベントでバインドするセレクターなど、セル内のすべての属性が失われます。

あなたがする必要があるのは、デフォルトのrowWriter関数をオーバーライドして、テーブル本体を生成するときに必要な形式を使用することです。

また、行には独自の列 ( のリンクdata-load-remote) にない情報が必要であるため、Dynatable は自動的に取得しないことに注意してください。したがって、それrowReaderを取得して JSON オブジェクトに格納する独自の関数も必要になるため、次のようになります。

["item-#": 1234, "location": "555 W. Test St.", "link": "/item-location/4"]

そうすれば、Dynatable は JSON データからテーブル行を書き戻すことができます。

// Function that renders the table rows from our records
function myRowWriter(rowIndex, record, columns, cellWriter) {
  var row = '<td>' + record["item-#"] + '</td><td><a href="#myModal" role="button" data-toggle="modal" data-load-remote="' + record.link + '" data-remote-target="#myModal . modal-body">' + record.location + '</a></td>';
  return row;
}

// Function that creates our records from the table when the page is loaded
function myRowReader(index, row, record) {
  var $row = $(row);
  record.link = $row.find('[data-load-remote]').text();
}

$('#inventory-table').dynatable({
  dataset: {
    perPageDefault: 20,
    perPageOptions: [20, 30, 50, 100]
  },
  writers: {
    _rowWriter: myRowWriter
  },
  readers: {
    _rowReader: myRowReader
  }
});

詳細については、ドキュメントのレンダリング セクションをご覧ください。

于 2015-10-14T00:33:27.110 に答える