Rails和Bootsrap-table用法 - JSON表在初次访问时不加载

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> 

此时的文档只是使它听起来像它是否行得通呢？没有其他信息是必要的？我没有正确地调用数据网址吗？我需要使用完整的网址吗？

我该如何实现这个JS调用，并实现showColumns和showToggle选项？

谢谢！

UPDATE

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

我现在停留在如何编辑或删除条目？我首先把.JS文件中的<％link_to％>放入.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

我有编辑和删除工作！见下面的应用程序。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编辑下面一行

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

到

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

在我的情况虽然，创造了“复制”控制表（FE分页或搜索框）生成时使用后退和前进按钮进行导航。

UPDATE：

放弃了，用这个岗位具有特定页面上禁用turbolinks（添加数据turbolinks =“假”身体标记），使其正常工作。

https://stackoverflow.com/a/39455004

Answer 2

编辑在引导-table.js文件的最后几行改为：

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

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

导轨4.2.6，5.0.1 turbolinks，引导4.0.0.alpha3

似乎工作正常。