0

我有bootstrap-table插件工作,表格顯示很棒。不過,我想要有一個編輯按鈕和一個刪除按鈕。我可以讓編輯按鈕工作。但是,我無法弄清楚如何通過我的JS發送一個摧毀。另外,我還有一個問題。當頁面最初加載時,JSON表格不會加載。我必須刷新頁面以獲取完整表格。有什麼想法嗎?Bootstrap-table和rails不能破壞條目

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="user_date" 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="user_date" 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> 
<br /> <br /> 
<!-- End JSON Table --> 

的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) { 
     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/' + row.id 
     console.log(value, row, index); 
    } 
}; 

weight_tracker_controller.rb破壞方法:

def destroy 
    @weight_tracker.destroy 
    flash[:notice] = "Measurement Deleted" 
    respond_with(@weight_tracker) 
    end 

我怎樣才能獲得的點擊卸下襬臂來刪除條目?當初始頁面加載時,dtaa會自動加載。

回答

0

可能不是最好的方法。但我已將以下內容添加到我的application.js調用中進行刪除。它正在工作。

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

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