Maison > interface Web > js tutoriel > nodejs utilise ztree pour se déplacer entre deux divs

nodejs utilise ztree pour se déplacer entre deux divs

不言
Libérer: 2018-06-30 14:06:23
original
1629 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal