zoukankan      html  css  js  c++  java
  • 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

     zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述.

    下面我将介绍如何实现使用该插件生成HTML元素Dom树,并对其进行多样操作.

    先贴上一个简单的HTML页面(直接拿的ztree的用的,画面简单实用,里面的文字内容不用在意)

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <title></title>
     6     <meta charset="utf-8" />
     7     <script src="../Scripts/jquery-2.2.4.min.js"></script>
     8     <link href="http://localhost:83/Library/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
     9     <script src="http://localhost:83/Library/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>
    10     <script src="../Scripts/tree.js"></script>
    11     <style type="text/css">
    12         div#rMenu {
    13             position: absolute;
    14             visibility: hidden;
    15             top: 0;
    16             background-color: #555;
    17             text-align: left;
    18             padding: 2px;
    19         }
    20 
    21             div#rMenu ul {
    22                 margin: 0;
    23                 padding: 0;
    24                 border: 0;
    25                 outline: 0;
    26                 font-weight: inherit;
    27                 font-style: inherit;
    28                 font-size: 100%;
    29                 font-family: inherit;
    30                 vertical-align: baseline;
    31             }
    32 
    33         .ztree {
    34             margin-top: 10px;
    35             border: 1px solid #617775;
    36             background: #f0f6e4;
    37             width: 220px;
    38             height: 360px;
    39             overflow-y: scroll;
    40             overflow-x: auto;
    41         }
    42 
    43         div#rMenu ul li {
    44             margin: 1px 0;
    45             padding: 0 5px;
    46             cursor: pointer;
    47             list-style: none outside none;
    48             background-color: #DFDFDF;
    49         }
    50     </style>
    51 </head>
    52 <body>
    53     <div class="content_wrap">
    54         <div class="zTreeDemoBackground left" id="tree">
    55             <ul id="treeDemo" class="ztree"></ul>
    56         </div>
    57     </div>
    58     <div class="example">
    59         <ul myid="1">
    60             <li myid="2">
    61                 <h2 myid="3">实现方法说明</h2>
    62                 <ul myid="4">
    63                     <li myid="5">对于这种只有一个根节点,且不显示 +/- 开关的需求,需要利用 css、setting 配合使用</li>
    64                     <li myid="6">zTree v3.x 可以针对指定的 level,进行样式设定,请查看本页面源码,查看 css 设置</li>
    65                     <li myid="7">设置 setting.view.dblClickExpand 指向 Function,可以只针对根节点关闭双击展开的操作</li>
    66                 </ul>
    67             </li>
    68         </ul>
    69     </div>
    70 </body>
    71 </html>

    2JS文件(仅生成dom树),需要用到递归

     1 var zNodes = [], zTree, rMenu, $example;
     2 function loopnodes(fathernode) {
     3     var ret = [];
     4     var children = $(fathernode).children();
     5     children.each(function (i, em) {
     6         var node = {
     7             myid: $(em).attr('myid'),
     8             name: $(em)[0].tagName + '|' + $(em).attr("myid"),
     9             children: []
    10         };
    11         if ($(em).children().length > 0) {
    12             node.children = loopnodes(em);
    13         }
    14         ret.push(node);
    15     });
    16     return ret;
    17 }
    18 $(document).ready(function () {
    19     $example = $(".example");
    20     zNodes = loopnodes($example);
    21     zTree = treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    22 });
    23 var setting = {
    24     edit: {
    25         showRemoveBtn: false,
    26         showRenameBtn: false,
    27     }
    28 };

     这样就可以把指定的区域的元素遍历到dom树上,再根据官方提供的Apl,可以对其进行一系列的操作.

    例如(举个简单例子,对应API很容易实现),点击dom树上的节点,对应的页面元素发生变化

    1 var setting = {
    2     edit: {
    3        showRemoveBtn: false,
    4        showRenameBtn: false,
    5     } ,
    6     callback: {
    7         onClick: zTreeOnClick,
    8     }
    9 };
    10 function zTreeOnClick(event, treeId, treeNode) {
    11     var myid = treeNode.myid;
    12     $example.find('[myid="' + myid + '"]').css('color', 'red');
    13};

    那么如何进行拖拽实现页面元素与dom树节点的变化了,首先,我们要明白ztree与位置变化相关的参数

    先贴一个简单的拖拽代码

     1 var setting = {
     2     edit: {
     3         drag: {      
     4             prev: true,
     5             inner: true,
     6             next: true,
     7             isMove: true,
     8             isCopy: true
     9         },
    10         enable: true,
    11         showRemoveBtn: false,
    12         showRenameBtn: false
    13     },
    14     callback: {
    15         beforeDrag: beforeDrag,
    16         beforeDrop: beforeDrop
    17     }
    18 };
    19 function beforeDrag(treeId, treeNodes) {
    20     return true;
    21 }
    22 function beforeDrop(treeId, treeNodes, targetNode, moveType) {
    23     return true;
    24 }

    我们需要需要关注的是beforeDrop,在拖拽落下的时候会传入的:

    treeNodes:拖动的节点

    targetNode:目标节点

    moveType:拖动节点与目标节点的关系

    我们确定拖动的节点所拖到的位置,就需要依靠moveType,它可能的值是

    prev: 拖动节点在目标节点之前
    inner: 拖动节点在目标节点之内
    next: 拖动节点在目标节点之后
    关于目标节点,可以参考下面内容:

    当你要把 C 拖拽到 A 和 B 之间 的时候, 如果仅仅要鼠标移动到 A和B 之间的空间内操作起来实属不易, 所以必然是在 B 的偏上位置 或 A 的偏下位置 即可认为是  A、B之间, 并且这里面也有一些细微的区别:

    在 A 偏下的时候, 你得到的 drop 的参数 target 是 A,moveType 是 next

    在 B 偏下的时候, 你的道德 drop 的参数 target 是 B,moveType 是 prev

     有了这层关系,很容易就可以完成拖拽dom树,页面元素跟随变化

     1 var setting = {
     2     edit: {
     3         drag: {      
     4             prev: true,
     5             inner: true,
     6             next: true,
     7             isMove: true,
     8             isCopy: true
     9         },
    10         enable: true,
    11         showRemoveBtn: false,
    12         showRenameBtn: false
    13     },
    14     callback: {
    15         beforeDrag: beforeDrag,
    16         beforeDrop: beforeDrop
    17     }
    18 };
    19 function dropdrag(selectmyid, targetmyid, moveType) {
    20     var currentelem = $example.find('[myid=' + selectmyid + ']');
    21     var parentelem = $example.find('[myid=' + targetmyid + ']');
    22     var content = currentelem.prop("outerHTML")
    23     if (moveType == 'inner') {
    24         parentelem.append(content);
    25         currentelem.remove();
    26     }
    27     else if (moveType == "prev") {
    28         parentelem.before(currentelem)
    29     }
    30     else {
    31         parentelem.after(currentelem)
    32     }
    33 }
    34 function beforeDrag(treeId, treeNodes) {
    35     return true;
    36 }
    37 function beforeDrop(treeId, treeNodes, targetNode, moveType) {
    38     var selectmyid = treeNodes[0].myid,
    39     targetmyid = targetNode.myid;
    40     dropdrag(selectmyid, targetmyid, moveType);
    41     return  true;
    42 }
  • 相关阅读:
    当重写的父类的返回值类型是子类的返回值类型的父类的时候返回值类型就可以不同 比如父类的返回值是Object 子类的返回值类型是String 同意吗?
    当重写的父类的返回值类型是子类的返回值类型的父类的时候返回值类型就可以不同 比如父类的返回值是Object 子类的返回值类型是String 同意吗
    重写后的方法与被重写的方法的返回值一样吗?
    java中,一个类实现某个接口,必须重写接口中的所有方法吗
    java方法重写返回值类型
    field
    JAVA父类引用指向子类的对象意思
    io模型
    操作系统面试题整理
    java并发问题
  • 原文地址:https://www.cnblogs.com/banluduxing/p/6112045.html
Copyright © 2011-2022 走看看