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完成后，添加上述事件，运行测试后，发行问题解决！完整的解决方案：

    :::javascript
    $('#' + 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();
            }
        });
    });

Comments

Categories

Tags