将 HTML 直接放入从 json 文件填充的表格的单元格中答案

【问题标题】：Putting HTML directly into the cell of a table that is populating from a json file将 HTML 直接放入从 json 文件填充的表格的单元格中
【发布时间】：2015-02-18 15:43:00
【问题描述】：

在搜索结果页面上，我有一个表，它使用 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>

在操作列中，我想列出一个<button>，但由于引导表的单元格是从 json 文件中自动填充的，所以<table> 不会采用<tbody>，我可以' t 在单元格中插入不是来自该 json 文件的任何内容。

我需要一种将<button> 添加到“操作”列中的每个单元格的方法，每个单元格都将具有不同的链接，具体取决于“证书编号”列的结果。这可能吗？

【问题讨论】：

表格渲染后是否愿意使用 jQuery？

标签： json twitter-bootstrap twitter-bootstrap-3 bootstrap-table

【解决方案1】：

我研究了插件，我认为您可以使用 jQuery dataTables for angularjs 做我经常做的事情。假设您设置了如下表格：

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

假设您的操作列如下：

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

我可能会在回调块中做这样的事情：

  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]));
  });

我认为应该这样做。

【讨论】：