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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
JS校验与最终登陆界面功能完整示例
Jan 13 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代码把全角数字转为半角数字
2007/12/10 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python的requests网络编程包使用教程
2016/07/11 Python
Python探索之修改Python搜索路径
2017/10/25 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
Python理解递归的方法总结
2019/01/28 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
甲方资料员岗位职责
2013/12/13 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
应用数学专业求职信
2014/03/14 职场文书
企业承诺书怎么写
2014/05/24 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript