zoukankan      html  css  js  c++  java
  • Ztree树节点应用

    树节点增删改查:
    前台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>


  • 相关阅读:
    c++ 异常处理(2)
    ajax跨域,这应该是最全的解决方案了
    浏览器Request Header和Response Header的内容
    devDependencies和dependencies的区别
    json对象按时间排序
    JavaScript里的循环方法总结
    json list数据递归生成树状层级JSON
    javaScript年份下拉列表框内容为当前年份及前后50年
    vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
    使用vue2+Axios+Router 之后的总结以及遇到的一些坑
  • 原文地址:https://www.cnblogs.com/inyu/p/13659090.html
Copyright © 2011-2022 走看看