BootstrapTable本地添加、删除数据

首先是HTML代码： 

在JavaScript中如下配置：

var $addSoftDistributeModalHostTable = $('#add-soft-distribute-modal-host-table').bootstrapTable('destroy').bootstrapTable({
            url: '',
            method: 'POST',
            uniqueId: 'id',
            striped: false,
            cache: false,
            sortable: true,
            sortOrder: "asc",
            sidePagination: "client",
            undefinedText: '--',
            toolbar: '#user-table-toolbar',
            search: false,
            strictSearch: true,
            clickToSelect: true,
            pagination: true,
            pageNumber:1,
            pageSize:5,
            pageList: [5, 10, 20, 50, 100],
            paginationLoop:false,
            //得到查询的参数
            queryParams : function (params) {
                //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名
                    sortOrder: params.order, //排位命令（desc，asc）
                };
                // console.log(temp);
                return temp;
            },
            columns: [
                {
                    checkbox: true
                },{
                        field: 'name',
                        title: '策略对象'
                }
            ]
});

那么如何往以上定义的$addSoftDistributeModalHostTable表格中添加内容呢？

方法如下：

$addSoftDistributeModalHostTable.bootstrapTable('prepend', nodesArrForTable);

具体使用实例：

        // 添加
        $("#add-soft-distribute-modal-host-add-button").click(function(){
             // 获取树对象
             var ztreeObj  = $.fn.zTree.getZTreeObj("add-soft-distribute-modal-host-tree");
             // 选择的树节点
             var selectedNodes = ztreeObj.getCheckedNodes(true);
             // 表格中节点集合
             var nodesArrForTable = [];
             // 用于删除的节点集合
             var nodesArrForRemove = [];
             for(var i = 0; i < selectedNodes.length; i++){
                 // 将用户节点添加进集合
                 if("mid" in selectedNodes[i]){
                     nodesArrForTable.push({mid: selectedNodes[i].mid, name: selectedNodes[i].name});
                     nodesArrForRemove.push(selectedNodes[i]);
                 }
             }
             if(nodesArrForTable.length == 0){
                 toastr.error("当前没有选择任何主机", "错误提示");
                 return false;
             }
    
             // 删除树节点
             for(var i=0; i < nodesArrForRemove.length; i++) {
                ztreeObj.removeNode(nodesArrForRemove[i]);
             }
             
               // 表格中插入节点
             $addSoftDistributeModalHostTable.bootstrapTable('prepend', nodesArrForTable);
        })

如何清除表格中的数据？

使用remove方法：

$addSoftDistributeModalHostTable.bootstrapTable('remove', { 
     field: "id", 
     values: host_ids
});

具体实例如下：

        // 删除
        $("#add-soft-distribute-modal-host-delete-button").click(function(){
            // 表格中选择的主机
            var checkedHosts = $addSoftDistributeModalHostTable.bootstrapTable('getSelections');
            // 主机集合
            var checkedHostsMids = [];
            if($addSoftDistributeModalHostTable.bootstrapTable('getData').length == 0){
                toastr.error("当前没有要移除的主机", "错误提示");
                return false;
            }
            if(checkedHosts.length == 0){
                 toastr.error("请选择要移除的主机", "错误提示");
                 return false;
            }
            for(var i = 0; i 0){
                for(var i = 0; i