编程案例——bootstrap左侧树增删改查

左侧树效果图

代码实例

前端页面
页面只需写一个ul标签即可

<div class="col-md-2">
      <ul id="ztree" class="ztree"></ul>
</div>

js引包

<script type="text/javascript" src="${ctx.contextPath}/static/plugins/admin-template/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx.contextPath}/static/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="${ctx.contextPath}/static/plugins/ztree/js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript" src="${ctx.contextPath}/static/plugins/ztree/js/jquery.ztree.exedit.min.js"></script>

js代码
只实现了删除和修改，本人不太会前端，所以没有写新增，希望懂的朋友留言告诉我。

var setting = {
        // view: {
        //     addHoverDom: addHoverDom,
        //     removeHoverDom: removeHoverDom,
        //     selectedMulti: false
        // },
        edit: {
            enable: true, //单独设置为true时，可加载修改、删除图标
            editNameSelectAll: true,
            removeTitle: '删除',
            renameTitle: '重命名'
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                nameKey: "name"
            }
        },
        callback: {

            beforeRemove: beforeRemove,//点击删除时触发，用来提示用户是否确定删除（可以根据返回值 true|false 确定是否可以删除）
            //beforeEditName: beforeEditName,//点击编辑时触发，用来判断该节点是否能编辑
            beforeRename: beforeRename,//编辑结束时触发，用来验证输入的数据是否符合要求(也是根据返回值 true|false 确定是否可以编辑完成)
            onRemove: onRemove,//(beforeRemove返回true之后可以进行onRemove)删除节点后触发，用户后台操作
            onRename: onRename,//编辑后触发，用于操作后台
            beforeDrag: beforeDrag,//用户禁止拖动节点
            onClick: clickNode//点击节点触发的事件
        }
    };

    var newCount = 1;
    function addHoverDom(treeId, treeNode) {
        console.log(treeNode);
        var sObj = $("#" + treeNode.id + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
        var addStr = "<span class=‘button add‘ id=‘addBtn_" + treeNode.id
            + "‘title=‘add node' οnfοcus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.id);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("ztree");
            zTree.addNodes(treeNode, {id:(treeNode.id*10 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
            return false;
        });
    }
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    }

    function beforeRemove(e, treeId, treeNode) {
        //console.log(e);
        //console.log(treeId); //  ztree
        //获取treeNode的父节点
        if (treeId.open) {
            return confirm("删除父节点会将其附属的子节点一并删除，您确定要删除吗？");
        }
        return confirm("您确定要删除吗？");
    }

    function onRemove(e, treeId, treeNode) {
        //console.log(treeId); //  ztree
        //console.log(treeNode); //  {name: "范冰冰", pId: "3", id: "31", open: false, level: 1, …}
        //alert("删除父节点的id为：" + treeNode.id + "\r\n它的子节点有：" + paramsArray.join(","));
        $.ajax({
            type: 'post',
            data: {
                id: treeNode.id
            },
            dataType: 'json',
            url: '${ctx.contextPath}/admin/demand/category/remove',
            success: function (data) {
                //alert("删除父节点的id为：" + treeNode.id + "\r\n它的子节点有：" + paramsArray.join(","));
                if (data.result) {
                    return alert("删除成功");
                } else {
                    return alert(data.msg);
                }
            },
            error: function (data) {
                return alert(data.msg);
            }
        });
    }

    function beforeRename(treeId, treeNode, newName, isCancel) {
        if (newName.length < 2) {
            alert("名称不能少于2个字符！");
            return false;
        }
        return true;
    }

    function onRename(e, treeId, treeNode, isCancel) {
        //console.log(treeNode);
        $.ajax({
            type: 'post',
            data: {
                id: treeNode.id,
                name: treeNode.name
            },
            dataType: 'json',
            url: '${ctx.contextPath}/admin/demand/category/update',
            success: function (data) {
                //alert("删除父节点的id为：" + treeNode.id + "\r\n它的子节点有：" + paramsArray.join(","));
                if (data.result) {
                    return alert("修改成功");
                } else {
                    return alert(data.msg);
                }
            },
            error: function (data) {
                return alert(data.msg);
            }
        });
        // alert("修改节点的id为：" + treeNode.id + "\n修改后的名称为：" + treeNode.name);
    }

    function beforeDrag(treeId, treeNodes) {
        return false;
    }

    function clickNode(event, treeId, treeNode, clickFlag) {
        //console.log(treeNode);
        var id = treeNode.id;
        var pid = treeNode.pid;
        $("#table-pagination").bootstrapTable('refresh', {
            url: "${ctx.contextPath}/admin/demand/detail/demandList?id=" + id + "&pid=" + pid
        });
    }

后端代码

@PostMapping("remove")
    public @ResponseBody
    RestResult remove(String id) {
        if (StringUtils.isBlank(id)) {
            return RestResult.Fail("删除失败，请重新尝试");
        }
        QueryWrapper<TDeCategory> q = Wrappers.query();
        q.eq("pid", id);
        List<TDeCategory> list = categoryService.list(q);
        if (list.size() > 0) {
            for (TDeCategory tDeCategory : list) {
                boolean b = categoryService.removeById(tDeCategory.getId());
                if (!b) {
                    return RestResult.Fail("删除子节点失败，请重新尝试");
                }
            }
        }
        boolean b = categoryService.removeById(id);
        if (b) {
            return RestResult.OK();
        } else {
            return RestResult.Fail("删除失败，请重新尝试");
        }
    }

    @PostMapping("update")
    public @ResponseBody
    RestResult update(String id, String name) {
        if (StringUtils.isBlank(id) || StringUtils.isBlank(name)) {
            return RestResult.Fail("请刷新页面，重新编辑");
        }
        QueryWrapper<TDeCategory> q = Wrappers.query();
        q.eq("id", id);
        TDeCategory category = new TDeCategory();
        category.setName(name);
        boolean update = categoryService.update(category, q);
        if (update) {
            return RestResult.OK();
        } else {
            return RestResult.Fail("修改失败请重新尝试");
        }
    }
    @GetMapping("dataList")
    public @ResponseBody
    RestPaging<TDeCategory> dataList(Page page) {
        QueryWrapper<TDeCategory> q = Wrappers.query();
        q.eq("status", 1);
        q.orderByAsc("sort");
        Page page1 = categoryService.page(page, q);
        return new RestPaging<TDeCategory>(page1.getTotal(), page1.getRecords());
    }