nodejs utilise ztree pour se déplacer entre deux divs

Cet article présente la méthode de "déplacer un nœud entre deux ps, en utilisant ztree". Les amis qui en ont besoin peuvent se référer à

idées d'implémentation :

1 Les nœuds dans ztree sont. Un tableau json est utilisé comme source de données, de sorte que la chaîne json est directement manipulée puis convertie en un tableau d'objets json.

2. Réinitialisez ensuite l'objet ztree avec l'objet tableau json nouvellement formé.

<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>

Code 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>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

Introduction à la requête LDAP sous node.js

Méthodes pour empêcher l'injection SQL dans node-mysql

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!