美文网首页
bootstrap-table remove record

bootstrap-table remove record

作者: 秋元_92a3 | 来源:发表于2020-02-16 20:41 被阅读0次

    实现功场景

    在BSTable初始化的表格的记录中,点击删除按钮,通过JS端程序,动态删除展示的表格


    WX20200216-195157@2x.png

    在前端程序的代码如下:

    'click .edit_delete': function (e, value, row, index) {
        const data = {'stationId': row.stationId, 'userOperatorSeq': row.userOperatorSeq};
        UserOperatorInfo.newData = row;
        //提交信息
        const ajax = new $ax(Feng.ctxPath + "/request/delete", function (data) {
          if (data.code === 200) {
            Feng.success("删除成功!");
            UserOperatorInfo.deleteCurStationUser();
          } else {
            Feng.error("删除失败! " + data.message + "!");
          }
        }, function (data) {
          Feng.error("删除失败!" + data.responseJSON.message + "!");
        });
        ajax.set(data);
        ajax.start();
        //按钮【确认】的回调
        layer.closeAll(UserOperatorInfo.layerIndex);
      },
    
    // 客户端删除的表格记录的代码
    UserOperatorInfo.deleteCurStationUser = function () {
      $('#table').bootstrapTable('remove', {field: 'userOperatorSeq', values: [UserOperatorInfo.newData.userOperatorSeq]});
    };
    

    bootstrap-table 删除记录的源码如下:

    o.prototype.remove = function (b) {
        var c, d, e = this.options.data.length;
        if (b.hasOwnProperty("field") && b.hasOwnProperty("values")) {
          for (c = e - 1; c >= 0; c--) {
            d = this.options.data[c], d.hasOwnProperty(b.field) && -1 !== a.inArray(d[b.field], b.values) && (this.options.data.splice(c,
                1), "server" === this.options.sidePagination && (this.options.totalRows -= 1));
          }
          e !== this.options.data.length && (this.initSearch(), this.initPagination(), this.initSort(), this.initBody(!0))
        }
      }
    

    源码分析:

    调用删除的方法需要传两个参数,第一个是比较字段名称,第二个是比较字段的值。
    第二个参数需要注意,源码中判断删除哪条记录的时候,进行比较使用的a.inArray(d[b.field], b.values)方法,这个方法要求传入的对象是数组,所以使用remove方法的时候,第二个参数我用中括号扩起来了,以将单个元素转换成数组。

    inArray的几种特例(返回大于等于0时,表示能匹配上)

    s.inArray("1","1"),返回的0,匹配。
    s.inArray("21","21"),返回-1,不匹配。
    当传入的第二个参数是字符串,会自动转换成数组。当传入的第一个参数的字符长度是1的时候,第二个参数可以不用转换成数组。但是当传入的第一个参数的字符长度大于1的时候,第二个参数就不能用字符串自动转换的数组了,需要使用通过加中括号转换的数组。
    s.inArray("21",["21"]) 返回0,匹配。

    相关文章

      网友评论

          本文标题:bootstrap-table remove record

          本文链接:https://www.haomeiwen.com/subject/jzaefhtx.html