Ztree树节点应用

青旅半醒 2022-06-04 08:47 258阅读 0赞

# `树节点增删改查:` #

前台jsp页面：

<%
        String root=request.getContextPath();//获取项目目录
    %>

<SCRIPT type="text/javascript">
        var setting = {
            async: {
                enable: true,
                url:"<%=root%>/book/cat/list.do",
                autoParam:["id", "name=n", "level=lv"],
                otherParam:{"otherParam":"zTreeAsyncTest"}
            },
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true,
            },
            callback: {
                onRemove: onRemove, //移除事件
                onRename: onRename //修改事件
            }
        };
    
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting);
        });
    
        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' οnfοcus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            var name = "new Node";
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                $.post('<%=root%>/book/cat/add.do?pId='+treeNode.id+'&nodeName='+name,function (data) {
                    var newID = data; //获取新添加的节点Id
                    zTree.addNodes(treeNode, {id:newID, pId:treeNode.id, name:name}); //页面上添加节点
                    var node = zTree.getNodeByParam("id", newID, null); //根据新的id找到新添加的节点
                    zTree.selectNode(node); //让新添加的节点处于选中状态
                });
            });
        };
        function onRemove(e, treeId, treeNode) {
           var onRe =  confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
            //需要对删除做判定或者其它操作，在这里写~~
            if (onRe){
            $.post('<%=root%>/book/cat/del.do?nodeId='+treeNode.id);
            console.log(treeNode.id);
            }
        }
        function onRename(e, id, treeNode, isCancel) {
            //需要对名字做判定的，可以来这里写~~
            if (treeNode.name.length == 0) {
                alert("节点名称不能为空.");
                return false;
            }
            console.log(treeNode.id);
            $.post('<%=root%>/book/cat/edit.do?nodeId='+treeNode.id+'&nodeName='+treeNode.name);
        }
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };
    </SCRIPT>