首页 / NODEJS / nodejs用ztree实现在两个div之间移动

nodejs用ztree实现在两个div之间移动

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了nodejs用ztree实现在两个div之间移动，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5862字，纯文字阅读大概需要9分钟。

内容图文

本文介绍了“node在两个p之间移动,用ztree实现”的方法，需要的朋友可以参考一下

实现思路：

1、ztree中节点是通过一个json的Array作为数据源、，所以直接操作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中文网！

内容总结

以上是互联网集市为您收集整理的nodejs用ztree实现在两个div之间移动全部内容，希望文章能够帮你解决nodejs用ztree实现在两个div之间移动所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/286071.html

来源：【匿名】

【上一篇】Node.js中如何合并两个复杂对象的介绍【下一篇】node.js和php的区别有哪些？

更多 ►

【nodejs用ztree实现在两个div之间移动】教程文章相关的互联网学习教程文章

用nodejs实现读取文件操作【代码】

//如果不是全局就得引入fs成员const fs = require("fs");//fs 核心模块中提供了一个 fs.readFile方法,来读取指定目录下的文件 //fs.resdFile 三个参数// 1,读取文件的路径 // 2,读取文件的编码格式 // 3,当文件读取完成,调用这个callback回调函数来读取文件的结果 //第一个参数文error对象第二个参数才是读取成功的结果 // fs.readFile(‘./http/111.txt‘,‘utf-8‘,function(error,data){ // console.log(error); //如果e...

夺命雷公狗---node.js---9实现页面的跳转【代码】【图】

废话不多说，我们先来看看项目的文件结构，如下所示：然后我们创建一个index.js的文件让他来做端口监听，代码如下所示： var http = require(‘http‘); var fs = require(‘fs‘); var url = require(‘url‘); FILE = "d:/node/code/http"; http.createServer(function(req,res){res.writeHead(200,{"Content-Type":"text/html"});//var data = fs.readFileSync(‘index.html‘);urladdress = FILE+url.parse(req.url).pathn...

nodejs简易实现一下bigpipe【代码】

今天刚好看到bigpipe的文章，写个demo试一下：//bigpipe测试function bigpipe(req , res){res.writeHead(200 , {‘Content-Type‘: ‘text/html;charset=utf-8‘});var html = "<html>" +"<head>" +"<meta charset=‘UTF-8‘>" +"<title>bigpipe测试</title>" +"<style>div{height:100px;line-height:100px;text-align:center;border:1px solid;margin: 10px;}</style>" +"<script>" +"function append(id , html){"+"document.get...

Node.js：实现知乎(www.zhihu.com)模拟登陆，获取用户关注主题【代码】【图】

前一段时间，在瞎看看 Node.js，便研究通过 Node.js 实现知乎模拟登陆。相信，有很多网站有登陆权限设置，如若用户未登陆，将会跳转至首页提醒用户登陆，无法浏览部分页面。如若是 b/s 架构，肯定是离不开 http(s) 协议，而 http(s) 协议又为无状态，为了实现状态保存，而又出现了 cookie/session，因此，登陆后，保存用户登陆状态，无非不就是利用 cookie/session 实现以上功能。cookie 与 session 有所不同，其中 cookie 保...

Node.js实现简易的获取access_token【代码】【图】

还是老样子，在自学node.js的道路上走得坑坑洼洼，按住了躁动的自己，调整好心情，ready........Go....! 首先在项目里新建config.json，其中 appid 与 appscrect 两个参数位于微信公众平台左侧菜单的基本配置中：代码块如下：{"token": "wechat","appID": "wx376********7243e","appScrect": "8962157f61*************1e04d244a","apiDomain": "https://api.weixin.qq.com/","apiURL": {"accessTokenApi": "%scgi-bin/token?gr...

用nodeJs实现文件夹内所有文件的重命名【代码】

nodeJs中我比较感兴趣的有一个地方就是fs文件系统。今天就用nodeJs实现了一个重命名文件夹内所有文件的脚本。命名可以自定义。‘use strict‘;var fs = require(‘fs‘);var i = 0;var $ = "$";//setting areavar directory = ‘./files‘;var format = ‘test‘+$;//setting areafunction rename(fileName,formation){ fs.readdir(fileName,function(err,data){ data.forEach(function(item){ i++; ...

Nodejs基于LRU算法实现的缓存处理操作示例

本文实例讲述了Nodejs基于LRU算法实现的缓存处理操作。分享给大家供大家参考，具体如下： LRU是Least Recently Used的缩写，即最近最少使用页面置换算法，是为虚拟页式存储管理服务的，是根据页面调入内存后的使用情况进行决策了。由于无法预测各页面将来的使用情况，只能利用“最近的过去”作为“最近的将来”的近似，因此，LRU算法就是将最近最久未使用的页面予以淘汰。可以用一个特殊的栈来保存当前正在使用的各个页面的页面号...

nodejs使用redis作为缓存介质实现的封装缓存类示例

本文实例讲述了nodejs使用redis作为缓存介质实现的封装缓存类。分享给大家供大家参考，具体如下：之前在node下使用redis作为缓存介质，对redis进行了一层封装 First: 安装npm包 redis const redis = require(redis);Second: 进行封装 // cache.js const redis = require(redis); const config = require(config); const logger = require(winston); const redisObj = {client: null,connect: function () {this.client = redis.cr...

Node.js 实现简单的无侵入式缓存框架的方法

前言python 的flask.ext.cache 通过注解这样对方法返回结果进行缓存： @cache.cached(timeout=300, key_prefix=view_%s, unless=None) def hello(name=None):print view hello calledreturn render_template(hello.html, name=name) 这类实现方式对业务逻辑没有丝毫的侵入性，非常之优雅。最近在做 Node.js 地项目，然而 js ES 7 之前都不支持注解，目前见到的缓存框架虽然在 API 设计上都很简洁、很有想法。可是痛点在于它们都是...

在nodejs中通过redis作为缓存实现的封装缓存类

这篇文章主要介绍了nodejs使用redis作为缓存介质实现的封装缓存类,涉及nodejs操作redis进行缓存设置相关操作技巧,需要的朋友可以参考下本文实例讲述了nodejs使用redis作为缓存介质实现的封装缓存类。分享给大家供大家参考，具体如下：之前在node下使用redis作为缓存介质，对redis进行了一层封装First: 安装npm包 redisconst redis = require(redis);Second: 进行封装// cache.js const redis = require(redis); const config = req...

详解Nodejs基于LRU算法实现的缓存处理操作方法

这篇文章主要介绍了Nodejs基于LRU算法实现的缓存处理操作,结合具体实例形式分析了LRU算法的原理、功能以及nodejs使用LRU算法实现缓存处理操作的相关实现技巧,需要的朋友可以参考下本文实例讲述了Nodejs基于LRU算法实现的缓存处理操作。分享给大家供大家参考，具体如下：LRU是Least Recently Used的缩写，即最近最少使用页面置换算法，是为虚拟页式存储管理服务的，是根据页面调入内存后的使用情况进行决策了。由于无法预测各页面将...

javascript – 如何在Sequelize ORM中实现缓存机制npm – node.js

我正在使用Sequelize作为ORM npm在Node.js中编写REST API来管理我的数据模型. 我担心我的API性能,因为有很多客户端,将使用相同的API,所以我想在Sequelize ORM中实现缓存机制. Sequelize ORM会有可能吗？如果是的如何？解决方法:如果您有大量数据,可以使用Redis或Memcached等缓存层来存储结果.这是两个Memcached vs. Redis?之间的比较.还有sequelize-redis-cache npm包你可以使用https://github.com/rfink/sequelize-redis-cache

首页 / NODEJS / nodejs用ztree实现在两个div之间移动

nodejs用ztree实现在两个div之间移动

内容导读

内容图文

内容总结

内容备注

内容手机端

【nodejs用ztree实现在两个div之间移动】教程文章相关的互联网学习教程文章

用nodejs实现读取文件操作【代码】

夺命雷公狗---node.js---9实现页面的跳转【代码】【图】

nodejs简易实现一下bigpipe【代码】

Node.js：实现知乎(www.zhihu.com)模拟登陆，获取用户关注主题【代码】【图】

Node.js实现简易的获取access_token【代码】【图】

用nodeJs实现文件夹内所有文件的重命名【代码】

Nodejs基于LRU算法实现的缓存处理操作示例

nodejs使用redis作为缓存介质实现的封装缓存类示例

Node.js 实现简单的无侵入式缓存框架的方法

在nodejs中通过redis作为缓存实现的封装缓存类

详解Nodejs基于LRU算法实现的缓存处理操作方法

javascript – 如何在Sequelize ORM中实现缓存机制npm – node.js

Node.js和MongoDB实现简单日志分析系统_node.js【图】

Node.js+ELK日志规范的实现

nodejs实现日志读取、日志查找及日志刷新的方法分析【图】

NODEJS - 相关标签

TREE - 相关标签

NODEJS - 技术教程分类

NODEJS - 最新教程

NODEJS - 最热教程