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