0

我有 bootstrap-table 插件工作并且表格显示得很好。但是我试图有一个编辑按钮和一个删除按钮。我可以让编辑按钮工作。但是，我无法弄清楚如何通过我拥有的 JS 发送破坏。另外，我还有另一个问题。最初加载页面时，不会加载 JSON 表。我必须刷新页面才能获得完整的表格。有什么想法吗？

index.html.erb：

    <div id="custom-toolbar">
      <%= link_to new_weight_tracker_path, :class => "btn btn-default", :remote => true, "data-toggle" => "modal", "data-target" => "#addMeasurement", 'aria-label' => "Add New Measurement" do %><span class="glyphicon glyphicon-plus"></span><% end %>
</div>
<table id="table-pagination" data-toggle="table" data-url="/weight_trackers.json" data-click-to-select="true" data-toolbar="#custom-toolbar" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-height="600" data-pagination="true" data-sort-name="user_date" data-show-export="true" data-sort-order="desc" data-export-types="['json', 'xml', 'csv', 'txt', 'excel']" >
  <thead>
    <tr>
      <th data-field="weight" data-sortable="true" data-align="right">Weight:</th>
      <th data-field="waist" data-sortable="true" data-visible="false" data-align="right">Waist:</th>
      <th data-field="wrist" data-sortable="true" data-visible="false" data-align="right">Wrist:</th>
      <th data-field="hip" data-sortable="true" data-visible="false" data-align="right">Hip:</th>
      <th data-field="forearm" data-sortable="true" data-visible="false" data-align="right">Forearm:</th>
      <th data-field="note" data-sortable="true" data-visible="false" data-align="left">Note:</th>
      <th data-field="user_date" data-sortable="true" data-align="right">Date:</th>
      <th class="nopadding" data-field="operate" data-formatter="operateFormatter" data-events="operateEvents" data-align="center" data-valign="center" data-halign="center"></th>
      <th class="nopadding" data-field="operate" data-formatter="operateFormatter2" data-events="operateEvents" data-align="center" data-valign="center" data-halign="center"></th>
    </tr>
  </thead>
</table>
<br /> <br />
<!-- End JSON Table -->

应用程序.js：

function operateFormatter(value, row, index) {
    return [
        '<a class="edit ml10 btn btn-default" href="javascript:void(0)" title="Edit">',
            '<i class="glyphicon glyphicon-pencil"></i>',
        '</a>'
    ].join('');
}

function operateFormatter2(value, row, index) {
    return [
        '<a class="remove ml10 btn btn-default" href="javascript:void(0)" title="Delete">',
            '<i class="glyphicon glyphicon-trash"></i>',
        '</a>'
    ].join('');
}

window.operateEvents = {
    'click .edit': function (e, value, row, index) {
        document.location.href='/weight_trackers/' + row.id + '/edit'

        console.log(value, row, index);
    },
    'click .remove': function (e, value, row, index) {
        alert('Are you sure you want to delete entry for ' + row.created_at);
        document.location.href='/weight_trackers/' + row.id
        console.log(value, row, index);
    }
};

weight_tracker_controller.rb 销毁方法：

  def destroy
  @weight_tracker.destroy
  flash[:notice] = "Measurement Deleted"
  respond_with(@weight_tracker)
  end

如何获得单击 .remove 以删除条目？并且在最初加载页面时自动加载 dtaa。

4

1 回答 1

0

可能不是最好的方法。但是我在我的 application.js 调用中添加了以下内容以进行删除。它正在工作。

function operateFormatter2(value, row, index) {
    return [
        '<a class="remove ml10 btn btn-default" data-method="delete" href="/weight_trackers/' + row.id + '" title="Delete">',
            '<i class="glyphicon glyphicon-trash"></i>',
        '</a>'
    ].join('');
}

    'click .remove': function (e, value, row, index) {
        alert('Are you sure you want to delete entry for ' + row.created_at);
        document.location.href='/weight_trackers'
        console.log(value, row, index);
    }
};
于 2015-01-14T02:19:09.363 回答