Question

我有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 -->

的application.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 destroy方法：

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

如何获取点击。删除条目？并且最初在页面加载时自动加载dtaa。

Answer 1

可能不是最好的方法。但我已将以下内容添加到我的application.js调用delete中。它正在发挥作用。

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

Bootstrap-table和rails无法进入DESTROY Entry

1 个答案: