1

当单击可排序表内的链接时，我正在使用 dynatable.js http://www.dynatable.com/和 bootstrap3 模态显示地图。

我正在寻找有关此问题的一些帮助。当我第一次加载页面并单击位置链接时，模式和远程数据显示并且工作正常，它会正确加载位置地图。但是，如果我加载页面，然后单击其中一列对表格进行排序（例如，我单击 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 函数与 click 事件绑定的链接和选择器。

您需要做的是覆盖默认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 回答