Question

我正在尝试将我的数据显示在一个能够显示所选列的表中。我认为twitter-bootstrap可以做我需要的，但它没有很多文档或完整的代码示例，我可以很容易地跟随rails / JSON更新。

http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html

我可以使用/weights.json访问我的JSON数据，它显示如下：

{
          "id": 163,
      "weight": "111.0",
        "note": "test new",
     "user_id": 1,
  "created_at": "2015-01-07T01:43:29.000Z",
  "updated_at": "2015-01-07T01:43:29.000Z"
}

有一点需要注意的是，我的JSON看起来并不漂亮..它出现在一行并且难以阅读。当你在控制器中使用format.json时它应该这样做吗？或者它应该像上面那样多线？

我的表：

<table data-toggle="table" data-url="weights.json" data-cache="false" data-height="299">
  <thead>
    <tr>
      <th><%= sortable "weight" %></th>
      <th><%= sortable "note" %></th>
      <th><%= sortable "created_at", "Date" %></th>
      <th class="nopadding"></th>
      <th class="nopadding"></th>
    </tr>
  </thead>
</table>

此时的文档只是让它听起来有效吗？没有其他信息需要？我没有正确地调用数据网址吗？我需要使用完整的URL吗？

如何使用JS调用实现此功能并实现showColumns和showToggle选项？

谢谢！

更新

好吧..我有这个工作！但是，当我加载索引页面/动作时...它没有第一次加载表格。有什么想法吗？我必须刷新页面，以便表格使用JSON数据加载表格。下面我将发布我的所有代码。

我现在被困在如何编辑或删除条目？我首先把＆lt;％link_to％＆gt;在.JS文件中..但在考虑之后......在JS中不会起作用。

那么如何通过我的按钮发送编辑或删除？

（仅供参考，我已经重建了我的脚手架，因此与顶级帖子相比有新的领域）

的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) {
        alert('You click edit icon, row: ' + JSON.stringify(row));
        console.log(value, row, index);
    },
    'click .remove': function (e, value, row, index) {
        alert('You click remove icon, row: ' + JSON.stringify(row));
        console.log(value, row, index);
    }
};

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="created_at" 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="created_at" 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>

weight_trackers_controller.rb：

  def index
  @weight_trackers = WeightTracker.where(user_id: current_user.id)
  @weight_tracker = WeightTracker.new

  respond_to do |format|
    format.html
    format.json { render json: @weight_trackers }
    format.xml { render :xml => @weight_trackers.to_xml }
  end
end
def new
  @weight_tracker = WeightTracker.new
  respond_with(@weight_tracker)
end

所以再一次，我的问题是..如何创建编辑/删除列的按钮，调用编辑方法/页面或删除选项。

更新2

我有编辑和删除工作！请参阅以下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" data-method="delete" href="/weight_trackers/' + row.id + '" 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'
        console.log(value, row, index);
    }
};

这样做..但是现在我需要努力让编辑打开一个模态。

我仍然有一个相当大的问题。在初始页面打开时，表格不会加载。关于如何在不重新加载/ F5页面的情况下加载JSon数据的任何想法？

Answer 1

我在刷新页面后加载bootstrap表时遇到同样的问题。

解决方法是在bootstrap-table.js中编辑以下行

    $(function () {
        $('[data-toggle="table"]').bootstrapTable();
    });
})(jQuery);

到

$(document).on('turbolinks:load', function() {
        $('[data-toggle="table"]').bootstrapTable();
    });
})(jQuery);

在我的情况下，在使用后退和前进按钮导航时，创建了一个“重复”表控件（f.e.分页或搜索框）生成。

更新：

放弃并使用此帖子禁用特定页面上的turbolinks（将data-turbolinks =“false”添加到body标签）以使其正常工作。

https://stackoverflow.com/a/39455004

Answer 2

将bootstrap-table.js文件中的最后几行编辑为：

    // BOOTSTRAP TABLE INIT
    // =======================

    document.addEventListener("turbolinks:load", function () {
        $('[data-toggle="table"]').bootstrapTable();
    });

rails 4.2.6，turbolinks 5.0.1，bootstrap 4.0.0.alpha3

似乎工作正常。

Rails和Bootstrap-table用法 - JSON表在初始访问时未加载

2 个答案: