2

在搜索结果页面上，我有一个使用 bootstrap-table 插件 ( http://bootstrap-table.wenzhixin.net.cn/ ) 的表格，用于引导从 json 文件中提取信息以自动填写单元格。该表如下所示：

<table data-toggle="table" data-striped="true" data-classes="table table-hover" data-url="certs2.json">
      <thead>
        <tr>
          <th style="width:40%" data-sortable="true" data-field="DateReturned">Date Returned</th>
          <th style="width:40%" data-sortable="true" data-field="CertNum">Certificate Number</th>
          <th style="width:20%" class="text-center">Actions</th>
        </tr>
      </thead>
    </table>

在操作列中，我想列出 a <button>，但由于引导表的单元格是从 json 文件中自动填充的，因此<table>不会采用 a<tbody>并且我无法在单元格中插入任何未进入的内容从那个json文件。

我需要一种方法来<button>为 Actions 列中的每个单元格添加一个，根据 Certificate Number 列的结果，每个单元格都有不同的链接。这可能吗？

4

1 回答 1

0

I studied the plugin and I think you could do what I routinely did using jQuery dataTables for angularjs. Assuming you set up a table like:

var plugin = $("<selector>").bootstrapTable({
    data : data,
    onPostBody : function () {
         //leverage this event to walk through the body dom and inject the fragment in appropriate cells.
    }) 
});

Let's say you gave your actions column like:

<th class="text-center" data-class="actions">Actions</th>

I might do something like this in the callback block:

  var buttonTemplate = _.template('<button class="btn btn-default action-buton" data-id="<%=id%>">Shout</button>');
 var data = plugin.getData();
 $("<table selector> tbody tr").each(function () {
     var row = $(this);
     var index = row.data("index"); //since each row element would have "data-id='...'" attribute
     row.find(".actions").html(buttonTemplate(data[index]));
  });

I think this should do it.

于 2015-02-19T07:30:01.067 回答