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


Posted in Javascript onMarch 06, 2013

实现思路:

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 leftDivStr = "[";
        var rightDivStr = "[";
        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++){
            leftDivStr+="{id:"+zNodes[i].id+",pId:"+zNodes[i].pId+",name:\""+zNodes[i].name+"\",open:"+zNodes[i].open+"},";
           }
        leftDivStr = leftDivStr.substring(0,leftDivStr.length-1);
        leftDivStr+="]";
        rightDivStr += "]";
        //查找被移动节点的所有父节点
        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,divStrFrom,divStrTo){
            /////////////////////////////////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 divFromArray = eval(divStrFrom);
            var divToArray = eval(divStrTo);
            for(var i = 0;i<nodesArray.length;i++){//删除节点
                for(var j = 0;j<divFromArray.length;j++){
                    if(divFromArray[j].id == nodesArray[i].id){
                        divFromArray.splice(j,1);
                    }
                }
            }
            divToArray = divToArray.concat(nodesArray);//增加节点
            divToArray = divToArray.concat(parentNodesArray);
            ///////////////////////////////////////////////////////////////////////////////////////去重复
            divFromArray = divFromArray.unique();
            divToArray = divToArray.unique();
            ///////////////////////////////////////////////////////////////////////////////////////////去重复
            if(zTreeFrom.setting.treeId == "treeDemo"){
                leftDivStr = divFromArray.toSource();
                rightDivStr =divToArray.toSource();
                $.fn.zTree.init($("#treeDemo"), setting, divFromArray);
                $.fn.zTree.init($("#treeDemo2"), setting,divToArray);
            }else{
                leftDivStr = divToArray.toSource();
                rightDivStr =divFromArray.toSource();
                $.fn.zTree.init($("#treeDemo2"), setting, divFromArray);
                $.fn.zTree.init($("#treeDemo"), setting,divToArray);
            }
        }
         
        //查找指定节点下的所有子节点
        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,leftDivStr,rightDivStr);
                });
                $("#toLeft").click(function(){
                    moveNodes(zTreeObj2,zTreeObj2.getSelectedNodes()[0],zTreeObj1,rightDivStr,leftDivStr);
                });    
                    $("#show").click(function(){
                        var leftDiv = new Array();
                        var leftDivStrArray = eval(leftDivStr);
                        for(var i = 0;i<leftDivStrArray.length;i++){
                            leftDiv[i] = leftDivStrArray[i].id;
                        }
                        var rightDivStrArray = eval(rightDivStr);
                        var rightDiv = new Array();
                        for(var i = 0;i<rightDivStrArray.length;i++){
                            rightDiv[i] = rightDivStrArray[i].id;
                        }
                    alert(leftDiv);
                    alert(rightDiv);
                });    
            });
        });
        
    </script>

html代码:

<body style="cursor: auto;">
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
        <button id="toRight">>></button>
        <button id="toLeft"><<</button>
        <button id="show">show</button>
    <div class="right">
        <ul id="treeDemo2" class="ztree"></ul>
    </div>
</div>
</body>
Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
vue-cli常用设置总结
Feb 24 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 #Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 #Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 #Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 #Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 #Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 #Javascript
js日期时间补零的小例子
Mar 05 #Javascript
You might like
PHP学习之PHP表达式
2006/10/09 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
详解python中的json和字典dict
2018/06/22 Python
Python构建图像分类识别器的方法
2019/01/12 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
delegate与普通函数的区别
2014/01/22 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
灰雀教学反思
2014/04/28 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
学校标语口号大全
2015/12/26 职场文书