Omi树组件omi-tree编写指南 - 【当耐特】_H5之家 - 中国HTML5教程资源分享第一站

Omi框架能够以少量的代码声明式地编写可拖拽移动节点的树形组件。
通常树组件能够考验UI框架的健壮性，因为需要使用到UI框架的如下特性：

下面来介绍下使用　omi-tree　的开发全过程。你也可以无视文章，先体验一把和直接编辑源码试一把：

omi-tree playground

类划分

tree.js 树组件的根容器类，包含节点移动，根据id获取节点等通用方法，这里把其排除在tree-node之外

tree-node.js 树节点，自递归嵌套组件，因为tree-node中可以包含tree-node

树的数据规则：

[ [ [] [] } ] [ [] [] } ] [ [] [] } ] } ] }

可以看到，每个节点都有唯一的id来标识，每个节点也有children属性来存放自己的子节点的信息。

组件HTML结构

tree结构:

group

通过 o-repeat 生成所有 tree-node

group-data 把 data.children 的数据批量传递给各个 tree-node

这里需要特别注意的是:

o-repeat 等所有指令对应的 scope 数据是 this.data

group-data，data等等的 scope 是 this

tree-node结构:

ondragstartondropdiv datanamenode

可以看到每个tree-node都标记了draggable代表可以拖拽，drag和drop的支持情况大家可以caniuse一把。

每个tree-node 既是拖拽对应，也是drop容器对象

li、div和ul都标记了 data-node-id 来存放id在dom元素上方便js里读取和传递

完整代码解析

先看tree:

(id(.getChildById(parentId, this.data.children) .data.children) parent.children.push(child) this.update() (parentId.getChildById(childId, this.data.children), children (len i < len; i++) { let child = children[i] errorIds .id ) (idlen i < len; i++) { let child = children[i] .splice(i, 1) return child .removeChildById(id, child.children) if (target) { return target (idlen i < len; i++) { let child = children[i] child .getChildById(id, child.children) if (target) { return target () .tag('tree', Tree)

下面来看 tree-node:

(evt) .getRootInstance(this.parent).moveNode(parseInt(evt.dataTransfer.getData("node-id")), parseInt(evt.target.dataset['nodeId'])) .node.classList.remove('drag-over') evt.stopPropagation() evt.preventDefault() (parent.moveNode){ return parent .getRootInstance(parent.parent) (evt){ this.node.classList.add('drag-over') evt.stopPropagation() evt.preventDefault() .node.classList.remove('drag-over') ..data.id) evt.stopPropagation() ()().tag('tree-node',TreeNode)

到此位置，复杂的拖拽移动都完成了。增删改查就更加简单了，大家可以接着试试~~~

Omi相关