ztree实战

时间：2019-02-25 18:53:47 阅读：143 评论：0 收藏：0 [点我收藏+]
改动：更改了图标；增加了获取所有节点的方法；增加了自定义按钮。
上代码。
<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false,
                showLine:false
            },
            edit: {
                enable: true,
                editNameSelectAll: true,
                showRemoveBtn: showRemoveBtn,
                showRenameBtn: showRenameBtn
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            check: {
                enable: true
            },
            callback: {
                beforeDrag: beforeDrag,
                beforeEditName: beforeEditName,
                beforeRemove: beforeRemove,
                beforeRename: beforeRename,
                onRemove: onRemove,
                onRename: onRename,
                beforeDrag: beforeDrag,
                beforeDrop: beforeDrop
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"父节点 1", open:true},
            // { id:11, pId:1, name:"叶子节点 1-1"},
            // { id:12, pId:1, name:"叶子节点 1-2"},
            // { id:13, pId:1, name:"叶子节点 1-3"},
            { id:2, pId:0, name:"父节点 2", open:true},
            // { id:21, pId:2, name:"叶子节点 2-1"},
            // { id:22, pId:2, name:"叶子节点 2-2"},
            // { id:23, pId:2, name:"叶子节点 2-3"},
            { id:3, pId:0, name:"父节点 3", open:true},
            // { id:31, pId:3, name:"叶子节点 3-1"},
            // { id:32, pId:3, name:"叶子节点 3-2"},
            // { id:33, pId:3, name:"叶子节点 3-3"}
            { id:4, pId:0, name:"父节点 4", open:true},
            { id:5, pId:0, name:"父节点 5", open:true},
        ];
        var log, className = "dark";
        function beforeDrag(treeId, treeNodes) {
            return false;
        }
        function beforeEditName(treeId, treeNode) {
            className = (className === "dark" ? "":"dark");
            showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            setTimeout(function() {
                if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
                    setTimeout(function() {
                        zTree.editName(treeNode);
                    }, 0);
                }
            }, 0);
            return false;
        }
        function beforeRemove(treeId, treeNode) {
            className = (className === "dark" ? "":"dark");
            showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
        }
        function onRemove(e, treeId, treeNode) {
            showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        }
        function beforeRename(treeId, treeNode, newName, isCancel) {
            className = (className === "dark" ? "":"dark");
            showLog((isCancel ? "<span style=‘color:red‘>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
            if (newName.length == 0) {
                setTimeout(function() {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.cancelEditName();
                    alert("节点名称不能为空.");
                }, 0);
                return false;
            }
            return true;
        }
        function onRename(e, treeId, treeNode, isCancel) {
            showLog((isCancel ? "<span style=‘color:red‘>":"") + "[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
        }
        function showRemoveBtn(treeId, treeNode) {
            // return !treeNode.isFirstNode;
            return true
        }
        function showRenameBtn(treeId, treeNode) {
            // return !treeNode.isLastNode;
            return true
        }
        function showLog(str) {
            if (!log) log = $("#log");
            log.append("<li class=‘"+className+"‘>"+str+"</li>");
            if(log.children("li").length > 8) {
                log.get(0).removeChild(log.children("li")[0]);
            }
        }
        function getTime() {
            var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds(),
            ms=now.getMilliseconds();
            return (h+":"+m+":"+s+ " " +ms);
        }

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            //
            var aObj = $("#" + treeNode.tId + "_a");
            //
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;

            var addStr = "<span class=‘button add‘ id=‘addBtn_" + treeNode.tId
                + "‘ title=‘add node‘ onfocus=‘this.blur();‘></span>";
            sObj.after(addStr);
            //
            var diyStr = "<span class=‘button extra-icon‘ id=‘diyBtn_" +treeNode.id+ "‘ title=‘"+treeNode.name+"‘ onfocus=‘this.blur();‘>加入常用</span>";
            aObj.append(diyStr);
            //
            var btn = $("#addBtn_"+treeNode.tId);

            if (btn) btn.bind("click", function(){
                //
                console.log(treeNode.id)
                //
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
                return false;
            });

            var diy_btn = $("#diyBtn_"+treeNode.id);
            if (diy_btn) diy_btn.bind("click", function(){
                alert("diy Button for " + treeNode.name);
            })
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
            $("#diyBtn_"+treeNode.id).unbind().remove();
        };
        function selectAll() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
        }
        
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $("#selectAll").bind("click", selectAll);
            setCheck();
        });



        function setCheck() {
            // check
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            type = { "Y":‘ps‘, "N":‘ps‘};
            zTree.setting.check.chkboxType = type;

            // drag
            zTree.setting.edit.drag.prev = true;
            zTree.setting.edit.drag.inner = false;
            zTree.setting.edit.drag.next = true;
            zTree.setting.edit.drag.isCopy = false;
            zTree.setting.edit.drag.isMove = true;
        }
        //-->


        function getAllNodes(){
            // alert("???")
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var node = treeObj.getNodes(); //可以获取所有的父节点
            var nodes = treeObj.transformToArray(node); //获取树所有节点
            console.log(nodes)
        }

        function beforeDrag(treeId, treeNodes) {
            for (var i=0,l=treeNodes.length; i<l; i++) {
                if (treeNodes[i].drag === false) {
                    return false;
                }
            }
            return true;
        }
        function beforeDrop(treeId, treeNodes, targetNode, moveType) {
            return targetNode ? targetNode.drop !== false : true;
        }

    </SCRIPT>
    <style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon01{margin:0; background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}


ul.ztree,div.content_wrap div.left{
    width: 300px;
}
div.content_wrap{
    width: 800px;
}
.ztree li span.button.extra-icon{
    vertical-align:top;
    margin:0;
    width:auto;
    height: auto;
    background: #37545A;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 10px;
    text-align: center;
    line-height: 10px;
    color: #fff;
    transform: scale(0.875);
}
.ztree li span.button.noline_open{
    background: url(../../../css/my/004.png) no-repeat scroll 3px 3px transparent;
}

.ztree li span.button.noline_close{
    background: url(../../../css/my/003.png) no-repeat scroll 3px 3px transparent;
}
.ztree li span.button.chk.checkbox_true_part,.ztree li span.button.chk.checkbox_true_part_focus{
    background: url(../../../css/my/001.png) no-repeat scroll 2px 1px transparent;
}
.ztree li span.button.chk.checkbox_true_full,.ztree li span.button.chk.checkbox_true_full_focus{
    background: url(../../../css/my/001.png) no-repeat scroll 2px 1px transparent;
}
.ztree li span.button.chk.checkbox_false_full,.ztree li span.button.chk.checkbox_false_full_focus{
    background: url(../../../css/my/002.png) no-repeat scroll 2px 1px transparent;
}
.ztree li span.button.ico_docu,.ztree li span.button.ico_close,.ztree li span.button.ico_open{
    display: none;
}
.ztree li span.button.add{
    background: url(../../../css/my/010.png) no-repeat scroll 0px 1px transparent;
    margin-right: 2px;
    margin-left: 0;
}
.ztree li span.button.add:hover{
    background: url(../../../css/my/009.png) no-repeat scroll 0px 1px transparent;
}
.ztree li span.button.edit{
    background: url(../../../css/my/006.png) no-repeat scroll 0px 1px transparent;
}
.ztree li span.button.edit:hover{
    background: url(../../../css/my/005.png) no-repeat scroll 0px 1px transparent;
}
.ztree li span.button.remove{
    background: url(../../../css/my/008.png) no-repeat scroll 0px 1px transparent;
}
.ztree li span.button.remove:hover{
    background: url(../../../css/my/007.png) no-repeat scroll 0px 1px transparent;
}
.ztree li a.curSelectedNode{
    border-color: transparent;
    background: transparent;
}
.ztree li a.curSelectedNode .node_name{
    color: #00bbe2;
}
.ztree li a,.ztree li a:hover{
    text-decoration: none;
}

    </style>
</HEAD>

<BODY>
<h1>高级 增 / 删 / 改 节点</h1>
<h6>[ 文件路径: exedit/edit_super.html ]</h6>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="right">
        <ul class="info">
            <li class="title"><h2>1、beforeEditName<br/>&nbsp;&nbsp;beforeRemove / onRemove<br/>&nbsp;&nbsp;beforeRename / onRename 事件回调函数控制</h2>
                <ul class="list">
                <li>此 Demo 演示合理利用自定义控件、事件回调函数配合以增强用户体验，操作时可以对比"基本 增 / 删 / 改 节点"的 Demo</li>
                <li>此 Demo 实现增加节点按钮</li>
                <li>此 Demo 实现删除节点时进行确认</li>
                <li>此 Demo 利用 showRenameBtn 对 isLastNode = true 的节点不显示编辑按钮 </li>
                <li>此 Demo 利用 showRemoveBtn 对 isFirstNode = true 的节点不显示删除按钮 </li>
                <li class="highlight_red">可以利用 beforeEditName 触发自定义的编辑操作</li>
                <li><p><span class="highlight_red">在对这些灵活的配置熟悉以后，相信你能够做出更加合理的编辑界面！</span><br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="selectAll" checked /> 编辑名称时是否全选 text<br/>
                    remove / rename log:&nbsp;&nbsp;<span style="color:red">红色</span> 表示取消编辑操作 (v3.5.13+)<br/>
                    <ul id="log" class="log"></ul></p>
                </li>
                </ul>
            </li>
            <li class="title"><h2>2、setting 配置信息说明</h2>
                <ul class="list">
                <li>同 "基本 增 / 删 / 改 节点"</li>
                </ul>
            </li>
            <li class="title"><h2>3、treeNode 节点数据说明</h2>
                <ul class="list">
                <li>同 "基本 增 / 删 / 改 节点"</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<button onclick="getAllNodes()">获取所有节点</button>
</BODY>
</HTML>
ztree实战
原文：https://www.cnblogs.com/foxcharon/p/10432583.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)