树形操作数据整理总结，这篇是第二篇。本篇是关于树节点拖拽组合，实现或、且的关系，并支持删除节点。demo 是基于 jquery 及 easy-ui 库实现的。

前言：

• demo 预览
• github 源代码
• 实现功能点：
  • tab 切换展示树数据
  • 树形展示、筛选
  • 左侧节点支持拖拽到右侧，并且可组合为或、且的关系
  • 右侧节点支持删除，并统计节点个数
  • 支持默认数据回填
  • 模拟获取保存数据
• 截图：

具体实现-loading:

利用 css3 实现。主要运用了 :before，:after 选择器‘画’了两个圆点，最后利用animation及transform:translateX() scale()实现动画。利用位移模拟的旋转，为了使效果更好，加了一点点缩放。

html：

<div class="loading"></div>

css:

.loading {     position: relative;     height: 100%;     line-height: 100%; } .loading:before, .loading:after {     position: absolute;     top: calc(50% - 5px);     left: calc(50% - 5px);     content: "";     width: 10px;     height: 10px;     border-radius: 100%; } .loading:before {     background: skyblue;     animation: loading-reverse .8s linear infinite;  } .loading:after {     background: yellow;     animation: loading .8s linear infinite;  } @keyframes loading {     from {         transform: translate(-20px) scale(.8);     }     to {         transform: translate(20px) scale(1.1);     } } @keyframes loading-reverse {     from {         transform: translate(20px) scale(.8);     }     to {         transform: translate(-20px) scale(1.1);     } }

本想用一个 loading + reverse 实现，但实现效果不是很理想，就用了两个。下面是一个 loading 的代码，可以试一下。

.loading:before {     background: skyblue;     animation: loading .8s linear infinite reverse;  } .loading:after {     background: yellow;     animation: loading .8s linear infinite;  } @keyframes

                    

                        
关键字：