BootstrapTable本地添加、删除、修改数据

首先是HTML代码： 

<table id="add-soft-distribute-modal-host-table" data-toggle="table" class="table table-bordered table-striped"></table>

在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<checkedHosts.length; i++){
                checkedHostsMids.push(checkedHosts[i].mid);
            }
            // 从表格中删除主机
            $addSoftDistributeModalHostTable.bootstrapTable('remove', {
                field: 'mid', values: checkedHostsMids
            });
            
            // 将要添加的主机节点
            var hostNodesForAdd = [];
            
            for(var i = 0; i < checkedHostsMids.length; i++){
                for(var j = 0; j < allNodesAtAddSoftDistributeModal.length; j++){
                    if("mid" in allNodesAtAddSoftDistributeModal[j]){
                        if(checkedHostsMids[i] == allNodesAtAddSoftDistributeModal[j].mid){
                            hostNodesForAdd.push(allNodesAtAddSoftDistributeModal[j]);
                        }
                    }
                }
            }
            
            var ztreeObj  = $.fn.zTree.getZTreeObj("add-soft-distribute-modal-host-tree");
            // 树中当前节点
            var nowNodes = ztreeObj.transformToArray(ztreeObj.getNodes());
            for(var i = 0; i<nowNodes.length; i++){
                if('children' in nowNodes[i]){
                    delete nowNodes[i].children;
                }
            }
            
            $.fn.zTree.init($("#add-soft-distribute-modal-host-tree"), settingForAddSoftDistribute, nowNodes.concat(hostNodesForAdd));
        })

// 清空添加软件分发策略模态框表格内所有主机
        function clearSoftDistributeModalHostData(){
            var checkedHosts = $addSoftDistributeModalHostTable.bootstrapTable('getData');
            var host_ids = [];
            var len = checkedHosts.length;
            if(len > 0){
                for(var i = 0; i<len; i++){
                    host_ids.push(checkedHost[i].id);
                }
            }
            $addSoftDistributeModalHostTable.bootstrapTable('remove', { 
                field: "id", 
                 values: host_ids
            });
        }

如何删除某一行数据呢？

根据“uniqueId”来删除

$networkConfigTable.bootstrapTable('removeByUniqueId', id);

如何修改数据？

根据行的索引修改：

$networkConfigTable.bootstrapTable('updateRow', {index: index, row: _data});