html表格删除指定行,Bootstrap-table删除指定行

记录bootstrap-table中内容使用了confirmation的行删除需要注意事项。

做的前端页面中使用到了bootstrap-table。表格除了显示数据外，还可以进行编辑/删除操作。

bootstrap-table中可以通过一个格式化函数返回某行某列的值，这里为了实现弹出的确认，使用了 bootstrap-confirmation。该空间提供了一系列属性值，可以根据需要设置，如：

title: 确认框标题

btnOkClass: 确认按钮的class

btnOkLabel: 确认按钮的标题

singleton: 一个页面上只允许出现一个弹出确认框

onConfirm: 点击确认后的回调函数

onShow/onHide: 确认框出现/隐藏时的回调函数

当然也定义了一系列事件， 如：

confirm.bs.confirmation/cancel.bs.confirmation: 点击确认/取消后触发的事件

show.bs.confirmation/hide.bs.confirmation: 显示/隐藏后触发的事件

实际项目中，使用以下的方式：

function opeFormatter(someid) {

var loadingFormat = 'data-loading-text=" 删除中"';

return '' + 'Edit' + '' + '|' + '' + 'Delete' + '';

通过这样的方式就实现了图示的效果。

当点击确认删除时，通过bootstrap-table提供的remove方法删除后，点击表格内的删除发行无法显示确认框。

删除指定行的方法形如：

$table.bootstrapTable('remove', {

field: 'yourField',

values: rowidArray

});

其中field的值时页面定义的某个 data-field，通过添加该方法后，表格就实现了删除，但是剩余表格内容点后后confirmation却无法显示。

因为前端的经验不多，一开始的思路是怀疑删除某行后，是否元素的html属性被修改了，从而导致后点击没有弹出确认框。但是通过检查页面元素，发行元素的html元素和删除行之前的相同，这个思路行不通。

接着考虑，是否是元素绑定的事件失效了。检查项目，发行在ready事件中的确绑定了事件，形如：

$('[data-toggle="confirmation"]').confirmation({

placement: 'top'

});

$('[data-toggle="confirmation"]').on('confirm.bs.confirmation', function (event, element) {

});

于是考虑在remove完成后，添加上述事件，运行测试后，发行问题解决！完整的解决方案：

$('#'+userid).button('loading').delay(1000).queue(function(){

varrow=$(this);

$.ajax({

url:'xxxxxx',

type:'GET',

dataType:'json',

data:{

'userid':userid

},

success:function(response){

varuserid=response['result'];

removeRow([userid]);

//button状态从loading状态恢复

row.button('reset');

row.dequeue();

//重新加载confirmation事件

$('[data-toggle="confirmation"]').confirmation({

placement:'top'

});

addToggleConfirm();

},

error:function(XMLHttpRequest,textStatus,errorThrown){

row.button('reset');

row.dequeue

$('[data-toggle="confirmation"]').confirmation({

placement:'top'

});

addToggleConfirm();

}

});

});