Использование Rails и Bootsrap-Table - таблица JSON не загружается при начальном посещении

Question

Я пытаюсь отобразить свои данные в таблицу с возможностью отображать выбранные столбцы. Я думаю, что твиттер-бутстрап может делать то, что мне нужно, но у него мало документации или на примерах кода. Я могу очень легко следить за тем, чтобы быть более новым для rails/JSON.

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

я могу получить доступ к моим данным в формате JSON с /weights.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?

Спасибо!

UPDATE

Хорошо .. У меня это работает! Однако, когда я загружаю индексную страницу/действие .. Она не загружает таблицу в первый раз. Есть предположения? Я должен обновить страницу, чтобы таблица загружала таблицу данными 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 

Так что, опять же, мой вопрос: как мне сделать кнопки для редактирования/удаления столбцов, вызвать метод/страницу редактирования или вариант удаления.

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

В моем случае, хотя, что создается «дубликат» управления таблицы (ФЭ пагинацию или окно поиска) при навигации с помощью кнопок «Назад» и «Вперед».

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

, похоже, хорошо работает.