一款轻量级树形控件EasyTreeview

程序员文章站 2022-04-27 12:17:33

...

使用方法

引入

<link rel="stylesheet" type="text/css" href="./css/index.min.css">
<div id="tree"></div>
<script type="text/javascript" src="./js/index.min.js"></script>
<script type="text/javascript">
	var tv = new EasyTreeview({
		el: 'tree',
		data: [
			{
				text: 'root',
				children: [
					{
						text: 'child - 1'
					}, {
						text: 'child - 2',
						children: [
							{
								text: 'child - 2 - 1'
							}
						]
					}
				]
			}
		]
	})
</script>

完整示例

var tv = new EasyTreeview({
	el: 'tree',
	draggable: true,
	checkable: true,
	onClick: function (symbol, node) {
		// console.log('%o %o', symbol, node)
	},
	onDragged: function (symbol, node) {
		// console.log('%o %o', symbol, node)
	},
	onDropped: function (symbol, node) {
		// console.log('%o %o', symbol, node)
	},
	onChecked: function (symbol, node, symbols) {
		// console.log('%o %o %o', symbol, node, symbols)
	},
	onUnchecked: function (symbol, node, symbols) {
		// console.log('%o %o %o', symbol, node, symbols)
	},
	data: [
		{
			id: 0,
			text: '服装',
			children: [
				{
					id: 4,
					text: '男装'
				}, {
					id: 6,
					text: '女装',
					style: {
						color: '#e33',
						lineHeight: '21px'
					},
					children: [
						{
							id: 12,
							text: '裤子',
							style: {
								color: '#fff',
								backgroundColor: '#bbdefb'
							}
						}, {
							id: 13,
							text: '裙子',
							checked: true,
							on: {
								click: function (e) {
									console.log(e.target)
								}
							}
						}
					]
				}
			]
		}
	]
})

可配置项

el (String | required)

DOM 已有节点，用以作为树形控件的容器。如果该节点不存在，控件将不会被创建。

draggable (Boolean | default: false)

如果值为 true，树节点将可被拖拽。

checkable (Boolean | default: false)

如果值为 true，树节点将包含复选框且可被选中。

data (Array | required)

用以创建树结构的用户数据。

data[i].text (String | required)

树节点的文本内容。

data[i].style (Object | optional)

自定义的节点样式。

data[i].on (Object | optional)

自定义的节点事件监听。

data[i].children (Object | optional)

当前节点的下属子树。

可配置的事件监听

onClick (Function | default: f (symbol, node) {})

symbol, 系统分配的***
node, 根据节点数据打包的系统对象

当树节点被点击时触发。

onDragged (Function | default: f (symbol, node) {})

当树节点被拖拽时触发。 (树控件 draggable 应为 true).

onDropped (Function | default: f (symbol, node) {})

当被拖拽节点被丢到该节点时触发。 (树控件 draggable 应为 true).

PS: 参数 node 不是被拖拽节点，而是被丢上的节点。

onChecked (Function | default: f (symbol, node, symbols) {})

symbols, 所有已选中的节点标号

当树节点被选中时触发。 (树控件 checkable 应为 true).

onUnchecked (Function | default: f (symbol, node, symbols) {})

当树节点被取消选中状态时触发。 (树控件 checkable 应为 true).

可调用的方法

getNodes () : Array

获取系统封装的所有节点对象

getCheckedNodes (): Array

获取被选中的系统封装的所有节点对象

getTree (): Array

获取原始数据当前的树形结构。这在拖拽树节点，树形结构发生变化时尤其有用。

其他

风格化

如果需要改变树控件的整体风格样式，这里并不建议在节点数据中挨个配置样式属性，而是希望引用者重写并覆盖树节点当前的类样式。

控件的 DOM 结构如下：

<ul class="sub-tree">
    <li class="branch-node" draggable="true">
        <div class="node-body">
            <span class="collapse-switch"></span>
            <span class="checkbox"></span>
            <span class="node-text">节点</span>
        </div>
        <ul class="sub-tree">
            <!-- recurse -->
        </ul>
    </li>
</ul>

树 or 森林

有些时候，开发者也许并不清楚自己创建到底是一颗树，还是一个森林。一般情况下，这两者的区别对业务并没有任何影响，因此也无需做差异化处理。然而在这里，如果你创建的是一个森林，那么请不要轻易改变根节点的性质，因为当你将它变为一截枝干时，它便无法再长成为一颗树了。

DOM 结构的创建

在树控件的处理中，循环和递归结构必不可少，递归用以纵向处理树的深度，循环用以横向处理树的广度。

我们可以使用 ul 标签建立子树增加树深，使用 li 标签建立树的节点以增加树宽，这在上文 DOM 结构中可以看到。下面是 dom 创建函数的简单原型：

var createBranch = function (nodes) {
    // self func, createElement
	var ul = createElement('ul', {
		className: 'sub-tree'
	})
	// loop
	nodes.forEach(function (node) {
		var li = createElement('li', {
			className: 'branch-node'
		})
		if (node.children) {
			// recurse
			li.appendChild(createBranch(node.children))
		}
		ul.appendChild(li)
	})
	return ul
}

在这里，children 起到两个作用：

作为创建子节点的数据
初始化时标识节点是否为枝干节点（之后，节点特性由系统负责标识）

状态的切换

在控件创建时，树节点状态（用户可控：checked，collasped，系统记录：branched）是可初始化的；而在用户选中/不选中复选框、收缩/展开子树、拖拽移动树节点时，对应的 checked、collapsed、branched 状态值也是需要切换的。虽是同一属性，却有两套业务要处理。面对这种情况，这里将初始获取属性值和将属性值赋给 DOM 节点解耦，用户事件刷新属性值和将属性值同步给视图解耦，以实现业务流程最大程度上的松散和可复用。

业务流程：