data.json

一、基于 ztree 插件实现

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>zTree</title>
  6.     <!-- IMPORT CSS -->
  7.     <link rel="stylesheet" href="css/reset.min.css">
  8.     <link rel="stylesheet" href="css/zTreeStyle.css">
  9. </head>
  10. <body>
  11.     <ul class="ztree" id="ztree1"></ul>
  12.     <!-- IMPORT JS -->
  13.     <script src="js/jquery.min.js"></script>
  14.     <script src="js/jquery.ztree.all.min.js"></script>
  15.     <script>
  16.         // $.fn.zTree.init([容器],[配置项],[数据]);
  17.         let $ztree1 = $('#ztree1'),
  18.             options = {};
  19.         $.ajax({
  20.             url: 'data.json',
  21.             method: 'GET',
  22.             success: result => {
  23.                 $.fn.zTree.init($ztree1, options, result);
  24.             }
  25.         })
  26.     </script>
  27. </body>
  28. </html>

二、基于 jQuery 的 ztree 插件

  1. ~ function ($) {
  2.     function ztree(data) {
  3.         let count = 0,
  4.             $this = $(this);
  5.         // 数据绑定
  6.         let bindHTML = function (result) {
  7.             let str = ``;
  8.             result.forEach(item => {
  9.                 count++;
  10.                 let {
  11.                     name,
  12.                     open,
  13.                     children
  14.                 } = item;
  15.                 str += `<li>
  16.                     <a href="" class="title">${name}</a>
  17.                     ${children?`<em class="icon ${open?'open':''}"></em>
  18.                     <ul class="level level${count}" 
  19.                         style="display:${open?'block':'none'}">
  20.                         ${bindHTML(children)}
  21.                     </ul>`:``}
  22.                 </li>`;
  23.                 count--;
  24.             });
  25.             return str;
  26.         };
  27.         $this.html(bindHTML(data));
  28.         // 基于事件委托实现点击操作
  29.         $this.click(function (ev) {
  30.             let target = ev.target,
  31.                 $target = $(target),
  32.                 $next = $target.next('ul');
  33.             if (target.tagName === 'EM') {
  34.                 $target.toggleClass('open');
  35.                 $next.stop().slideToggle(100);
  36.             }
  37.         });
  38.     }
  39.     $.fn.extend({
  40.         ztree: ztree
  41.     });
  42. }(jQuery);

三、自己模拟一个ztree

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>zTree树形结构菜单</title>
  6.     <!-- import css -->
  7.     <link rel="stylesheet" href="css/reset.min.css">
  8.     <style>
  9.         .container {
  10.             box-sizing: border-box;
  11.             margin: 20px auto;
  12.             padding: 10px;
  13.             width: 600px;
  14.             border: 1px dashed #AAA;
  15.             -webkit-user-select: none;
  16.         }
  17.         .level {
  18.             display: none;
  19.             font-size: 14px;
  20.             margin-left: 10px;
  21.         }
  22.         .level.level0 {
  23.             display: block;
  24.             margin-left: 0;
  25.         }
  26.         .level li {
  27.             position: relative;
  28.             padding-left: 15px;
  29.             line-height: 30px;
  30.         }
  31.         .level li .icon {
  32.             position: absolute;
  33.             left: 0;
  34.             top: 9px;
  35.             box-sizing: border-box;
  36.             width: 12px;
  37.             height: 12px;
  38.             line-height: 8px;
  39.             text-align: center;
  40.             border: 1px solid #AAA;
  41.             background: #EEE;
  42.             cursor: pointer;
  43.         }
  44.         .level li .icon:after {
  45.             display: block;
  46.             content: "+";
  47.             font-size: 12px;
  48.             font-style: normal;
  49.         }
  50.         .level li .icon.open:after {
  51.             content: "-";
  52.         }
  53.         .level li .title {
  54.             color: #000;
  55.         }
  56.     </style>
  57. </head>
  58. <body>
  59.     <div class="container">
  60.         <ul class="level level0" id="tree1"></ul>
  61.     </div>
  62.     <div class="container">
  63.         <ul class="level level0" id="tree2"></ul>
  64.     </div>
  65.     <!-- import js -->
  66.     <script src="js/jquery.min.js"></script>
  67.     <script src="js/ztree-plugin.js"></script>
  68.     <script>
  69.         $.ajax({
  70.             url: 'data.json',
  71.             method: 'get',
  72.             success: result => {
  73.                 $('#tree1').ztree(result);
  74.                 $('#tree2').ztree(result);
  75.             }
  76.         });
  77.     </script>
  79.     <script>
  80.         /* let treeModule = (function () {
  81.             let $level0 = $('.level0'),
  82.                 count = 0;
  84.             // 获取数据
  85.             let queryData = function (callBack) {
  86.                 $.ajax({
  87.                     url: 'data.json',
  88.                     method: 'get',
  89.                     success: callBack
  90.                     // success: result => {
  91.                     //     callBack(result);
  92.                     // }
  93.                 });
  94.             };
  96.             // 数据绑定
  97.             let bindHTML = function (result) {
  98.                 let str = ``;
  99.                 result.forEach(item => {
  100.                     count++;
  101.                     let {
  102.                         name,
  103.                         open,
  104.                         children
  105.                     } = item;
  106.                     str += `<li>
  107.                         <a href="" class="title">${name}</a>
  108.                         ${children?`<em class="icon ${open?'open':''}"></em>
  109.                         <ul class="level level${count}" 
  110.                             style="display:${open?'block':'none'}">
  111.                             ${bindHTML(children)}
  112.                         </ul>`:``}
  113.                     </li>`;
  114.                     count--;
  115.                 });
  116.                 return str;
  117.             };
  119.             return {
  120.                 init() {
  121.                     // 基于事件委托实现点击操作
  122.                     $level0.click(function (ev) {
  123.                         let target = ev.target,
  124.                             $target = $(target),
  125.                             $next = $target.next('ul');
  126.                         if (target.tagName === 'EM') {
  127.                             // 加减号的切换
  128.                             $target.toggleClass('open');
  129.                             // 控制子集的显示隐藏
  130.                             $next.stop().slideToggle(100);
  131.                         }
  132.                     });
  133.                     queryData(function anonymous(result) {
  134.                         // 获取数据后完成相关的事项
  135.                         $level0.html(bindHTML(result));
  136.                     });
  137.                 }
  138.             }
  139.         })();
  140.         treeModule.init(); 
  141.     </script>
  142. </body>
  143. </html>

递归数据绑定.png

四、基于原生 js 实现鼠标拖拽

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>DRAG-拖拽</title>
  6.     <!-- IMPORT CSS -->
  7.     <link rel="stylesheet" href="css/reset.min.css">
  8.     <style>
  9.         html,
  10.         body {
  11.             height: 100%;
  12.             overflow: hidden;
  13.         }
  14.         .box {
  15.             position: absolute;
  16.             top: 0;
  17.             left: 0;
  18.             width: 100px;
  19.             height: 100px;
  20.             background: red;
  21.             cursor: move;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="box" id="box"></div>
  27.     <script>
  28.         box.addEventListener('mousedown', down);
  29.         function down(ev) {
  30.             this.startX = ev.pageX;
  31.             this.startY = ev.pageY;
  32.             this.startL = this.offsetLeft;
  33.             this.startT = this.offsetTop;
  34.             // 把执行 BIND 处理后的函数存储到盒子的自定义属性上，绑定的时候绑定存储的这个方法，移除的时候也基于自定义属性获取到这个方法移除
  35.             this._MOVE = move.bind(this);
  36.             this._UP = up.bind(this);
  37.             document.addEventListener('mousemove', this._MOVE);
  38.             document.addEventListener('mouseup', this._UP);
  39.         }
  40.         function move(ev) {
  41.             let curL = ev.pageX - this.startX + this.startL,
  42.                 curT = ev.pageY - this.startY + this.startT;
  43.             let minL = 0,
  44.                 minT = 0,
  45.                 maxL = document.documentElement.clientWidth - this.offsetWidth,
  46.                 maxT = document.documentElement.clientHeight - this.offsetHeight;
  47.             curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
  48.             curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
  49.             this.style.left = curL + 'px';
  50.             this.style.top = curT + 'px';
  51.         }
  52.         function up(ev) {
  53.             document.removeEventListener('mousemove', this._MOVE);
  54.             document.removeEventListener('mouseup', this._UP);
  55.         }
  56.     </script>
  58.     <script>
  59.         /* box.onmousedown = down;
  61.         function down(ev) {
  62.             // 把鼠标起始位置信息和盒子起始位置信息存储到盒子的自定义属性上
  63.             this.startX = ev.pageX;
  64.             this.startY = ev.pageY;
  65.             this.startL = this.offsetLeft;
  66.             this.startT = this.offsetTop;
  67.             // 按下来在给盒子绑定 MOVE 方法
  68.             // 谷歌浏览器中解决鼠标焦点丢失的问题（别绑定给盒子了，绑定给 document），但是要注意 move 中的 this 已经是 document 了，而不是之前的 box，我们需要处理一下
  69.             document.onmousemove = move.bind(this);
  70.             document.onmouseup = up.bind(this);
  71.         }
  72.         function move(ev) {
  73.             // 随时获取当前鼠标的信息，计算盒子最新的位置
  74.             let curL = ev.pageX - this.startX + this.startL,
  75.                 curT = ev.pageY - this.startY + this.startT;
  76.             // 边界判断
  77.             let minL = 0,
  78.                 minT = 0,
  79.                 maxL = document.documentElement.clientWidth - this.offsetWidth,
  80.                 maxT = document.documentElement.clientHeight - this.offsetHeight;
  81.             curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
  82.             curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
  83.             this.style.left = curL + 'px';
  84.             this.style.top = curT + 'px';
  85.         }
  86.         function up(ev) {
  87.             // 鼠标抬起，把 MOVE 移除掉
  88.             document.onmousemove = null;
  89.             document.onmouseup = null;
  90.         }
  91.  */
  92.         /*
  93.          *  // 把鼠标和当前盒子拿绳子捆在一起
  94.             this.setCapture();
  95.             // 把鼠标和盒子解绑
  96.             this.releaseCapture(); 
  97.             谷歌不支持
  98.          */
  99.     </script>
  100. </body>
  102. </html>

拖拽.png