>  기사  >  웹 프론트엔드  >  nodejs는 ztree를 사용하여 두 div 사이를 이동합니다.

nodejs는 ztree를 사용하여 두 div 사이를 이동합니다.

不言
不言원래의
2018-06-30 14:06:231603검색

이 글에서는 "ztree를 사용하여 두 ps 사이에서 노드를 이동하는 방법"을 소개합니다. 필요한 친구는 이를 참조할 수 있습니다.

구현 아이디어:

1. ztree의 노드는 데이터 소스로 사용됩니다. json 문자열을 직접 조작한 다음 이를 json 객체 배열로 변환합니다.

2. 그런 다음 새로 형성된 json 배열 객체로 ztree 객체를 다시 초기화합니다.

<link rel="stylesheet" href="demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.5(1).js"></script>
<script type="text/javascript">
        var zTreeObj1;
        var zTreeObj2;
        var leftpStr = "[";
        var rightpStr = "[";
        var setting = {
            edit: {
                enable: false,
                showRemoveBtn: false,
                showRenameBtn: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                //onClick : menuOnClick
            }
        };
        function menuOnClick(event, treeId, treeNode, clickFlag) {

        }
        //注册toSource函数,解决ie不支持Array的toSource()方法的问题
        Array.prototype.toSource = function (){
             var str = "[";
             for(var i = 0 ;i<this.length;i++){
                 str+="{id:\""+this[i].id+
                         "\",pId:\""+this[i].pId
                         +"\",name:\""+this[i].name
                         +"\",isParent:\""+this[i].isParent
                         +"\",file:\""+this[i].file
                         +"\",icon:\""+this[i].icon
                         +"\",open:\""+this[i].open
                         +"\"},";
             }
             if(this.length != 0){
                 str = str.substring(0, str.length-1);
             }
             str +="]";
            return str;
        } ;
        //注册unique函数,去掉array中重复的对象(id相同即为同一对象)
        Array.prototype.unique = function (){
             var r = new Array();
            label:for(var i = 0, n = this.length; i < n; i++) {
                for(var x = 0, y = r.length; x < y; x++) {
                    if(r[x].id == this[i].id) {
                        continue label;
                    }
                }
                r[r.length] = this[i];
            }
            return r;
        } ;
        //初始数据
        var zNodes =[
            { id:1, pId:0, name:"父节点 1", open:true},
            { id:11, pId:1, name:"叶子节点 1-1",open:true},
            { id:111, pId:11, name:"叶子节点 11-1"},
            { id:112, pId:11, name:"叶子节点 11-2"},
            { id:12, pId:1, name:"叶子节点 1-2",open:true},
            { id:121, pId:12, name:"叶子节点 12-1"},
            { id:122, pId:12, name:"叶子节点 12-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"}
        ];

        for(var i=0;i<zNodes.length;i++){
leftpStr+="{id:"+zNodes[i].id+",pId:"+zNodes[i].pId+",
name:\""+zNodes[i].name+"\",open:"+zNodes[i].open+"},";
           }
        leftpStr = leftpStr.substring(0,leftpStr.length-1);
        leftpStr+="]";
        rightpStr += "]";

        //查找被移动节点的所有父节点
        function findParentNodes(treeNode, parentNodes){
            parentNodes += "{id:"+treeNode.id+",pId:"+treeNode.pId+
            ",name:\""+treeNode.name+"\",open:"+treeNode.open+"},";
            if(treeNode != null && treeNode.getParentNode()!= null){
                parentNodes =findParentNodes(treeNode.getParentNode(),parentNodes);

            }
            return parentNodes;
        }        
        //移动节点
        function moveNodes(zTreeFrom,treeNode,zTreeTo,pStrFrom,pStrTo){
            /////////////////////////////////treeNode的所有父节点
            var parentNodes ="[";
            if(treeNode.pId != null){
                parentNodes = findParentNodes(treeNode,parentNodes);
                parentNodes = parentNodes.substring(0,parentNodes.length-1);
            }

            parentNodes +="]";
            //alert(parentNodes);
            var parentNodesArray = eval(parentNodes);
            ///////////////////////////////
            var nodes = "[";
nodes+= "{id:"+treeNode.id+",pId:"+treeNode.pId+",
name:\""+treeNode.name+"\",open:"+treeNode.open+"},";
            nodes = operChildrenNodes(treeNode,nodes);
            nodes = nodes.substring(0,nodes.length-1);
            nodes+="]";
            var nodesArray = eval(nodes);
            var pFromArray = eval(pStrFrom);
            var pToArray = eval(pStrTo);
            for(var i = 0;i<nodesArray.length;i++){//删除节点
                for(var j = 0;j<pFromArray.length;j++){
                    if(pFromArray[j].id == nodesArray[i].id){
                        pFromArray.splice(j,1);
                    }
                }
            }

            pToArray = pToArray.concat(nodesArray);//增加节点
            pToArray = pToArray.concat(parentNodesArray);

            //////////////////////去重复
            pFromArray = pFromArray.unique();
            pToArray = pToArray.unique();
           ////////////////////////去重复

            if(zTreeFrom.setting.treeId == "treeDemo"){
                leftpStr = pFromArray.toSource();
                rightpStr =pToArray.toSource();
                $.fn.zTree.init($("#treeDemo"), setting, pFromArray);
                $.fn.zTree.init($("#treeDemo2"), setting,pToArray);

            }else{
                leftpStr = pToArray.toSource();
                rightpStr =pFromArray.toSource();
                $.fn.zTree.init($("#treeDemo2"), setting, pFromArray);
                $.fn.zTree.init($("#treeDemo"), setting,pToArray);
            }
        }

         
        //查找指定节点下的所有子节点
        function operChildrenNodes(treeNode,nodes){
            if(treeNode.children!= undefined){//是父节点,有子节点
                for(var j = 0;j<treeNode.children.length;j++){
                    var childNode = treeNode.children[j];
                    nodes+="{id:"+childNode.id+",pId:"+childNode.pId+",
                    name:\""+childNode.name+"\",open:"+childNode.open+"},";
                    nodes = operChildrenNodes(childNode,nodes);
                }
            }else{//没子节点
            }
            return nodes;
        }

        
        $(document).ready(function(){
            zTreeObj1 = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTreeObj2 = $.fn.zTree.init($("#treeDemo2"), setting);
            $(function() {
                $("#toRight").click(function() {
                    moveNodes(zTreeObj1,zTreeObj1.getSelectedNodes()[0],
                    zTreeObj2,leftpStr,rightpStr);
                });
                $("#toLeft").click(function(){
                    moveNodes(zTreeObj2,zTreeObj2.getSelectedNodes()[0],
                    zTreeObj1,rightpStr,leftpStr);

                });    
                    $("#show").click(function(){
                        var leftp = new Array();
                        var leftpStrArray = eval(leftpStr);
                        for(var i = 0;i<leftpStrArray.length;i++){
                            leftp[i] = leftpStrArray[i].id;
                        }
                        var rightpStrArray = eval(rightpStr);
                        var rightp = new Array();
                        for(var i = 0;i<rightpStrArray.length;i++){
                            rightp[i] = rightpStrArray[i].id;
                        }
                    alert(leftp);
                    alert(rightp);

                });    
            });
        });

        
    </script>

html 코드:

<body style="cursor: auto;">
<p class="content_wrap">
    <p class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </p>
        <button id="toRight">>></button>
        <button id="toLeft"><<</button>
        <button id="show">show</button>
    <p class="right">
        <ul id="treeDemo2" class="ztree"></ul>
    </p>
</p>
</body>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

node.js의 LDAP 쿼리 소개

node-mysql에서 SQL 주입을 방지하는 방법

위 내용은 nodejs는 ztree를 사용하여 두 div 사이를 이동합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.