0

我试图让我的数据显示到一个能够显示选定列的表中。我认为 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>

此时的文档只是让它听起来像它会起作用？不需要其他信息？我没有正确调用 data-url 吗？我需要使用完整的 URL 吗？

我将如何通过 JS 调用实现这一点并实现 showColumns 和 showToggle 选项？

谢谢！

更新

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

我现在被困在如何编辑或删除条目上？我起初将 <% link_to %> 放在 .JS 文件中。但是在考虑之后.. 这在 JS 中不起作用。

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

（仅供参考，我已经重新生成了我的脚手架，因此与顶帖相比有新的字段）

应用程序.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 页面的任何想法？

4

2 回答 2

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

似乎工作正常。

于 2017-02-21T21:44:57.010 回答
0

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

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

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

至

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

但在我的情况下，当使用后退和前进按钮导航时，这会创建“重复”表格控件（fe 分页或搜索框）生成。

更新：

放弃并使用这篇文章禁用特定页面上的 turbolinks（将 data-turbolinks="false" 添加到 body 标签）以使其正常工作。

https://stackoverflow.com/a/39455004

于 2016-09-28T12:30:36.453 回答