Bootstrap-table删除指定行

导读

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

表格

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

bootstrap-table with confirmation

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="<i class=\'fa fa-spinner fa-spin \'></i> 删除中" ';
return '<a class="btn btn-default btn-sm"  href="/dealerusers/edit?userid=' + str + '">' + 'Edit' + '</a>' + ' | ' + '<a class="btn btn-default btn-sm" data-toggle="confirmation" data-singleton="true" data-popout="true" data-title="确认删除?" data-btn-cancel-label = "取消" data-btn-ok-label="确认" ' + 'id= ' + someid + loadingFormat + '>' + 'Delete' + '</a>';

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

遇到的问题

当点击确认删除时,通过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 () {
    var row = $(this);
    $.ajax({
        url: 'xxxxxx',
        type: 'GET',
        dataType: 'json',
        data: {
            'userid': userid
        },
        success: function (response) {
            var userid = 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();
        }
    });
});