Rails和引导表的使用- JSON表在初次访问时没有加载

Question

我正在尝试将我的数据显示到一个表中，该表具有显示所选列的能力。我认为twitter引导程序可以满足我的需要，但是它没有太多的文档或完整的代码示例，我可以很容易地使用它来更新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？我需要使用完整的URL吗？

我将如何使用JS调用来实现这一点，以及如何实现showColumns和showToggle选项？

谢谢!

更新

好的..。我已经开始工作了！但是，当我加载索引页/操作时。它不会在第一次加载表。有什么想法吗？我必须刷新页面，这样表才能用JSON数据加载表。下面我会发布我所有的代码。

我现在被困在如何编辑或删除该条目上？我首先将<% link_to %>放在.JS文件中。但想过之后..。这在JS内部行不通。

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

(FYI，我已经重建了我的脚手架，所以与顶上的职位相比有了新的领域)

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

这样做..。然而，现在我需要让编辑打开一个模式。

不过，我仍然有一个很大的问题。表将不会在打开的初始页上加载。对于如何让它加载JSon数据而不必重新加载/ F5页面，有什么想法吗？

Answer 1

编辑了引导-table.js文件中的最后几行以读取：

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

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

rails 4.2.6，turbolinks 5.0.1，引导4.0.0.alpha 3

看上去很正常。

Answer 2

只有在刷新页面后才会加载引导表，我也遇到了同样的问题。

解决办法是在引导-table.js中编辑下面的行

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

至

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

在我的例子中，这创建了一个“重复”表控件(f.e。使用“后退”和“向前”按钮导航时生成分页或搜索框。

更新：

放弃并使用此帖子禁用特定页面上的turbolinks (将数据-turbolinks=“false”添加到body标记)以使其正确工作。

https://stackoverflow.com/a/39455004