clay-core
Version:
Provide a more friendly web-side drawing interface!
74 lines (67 loc) • 2.21 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../libs/easycss-1.3.1.min.css">
<link rel="stylesheet" href="../../libs/prettify.css">
<link rel="stylesheet" href="../../doc.css">
<script src="../../libs/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<header>
tree 树布局
</header>
<p>
因为在教程的布局的使用一节使用的例子就是这里的tree布局，这里先对那里已经说明的部分简单说明一下，然后补充一些内容那里没有涉及的部分。
</p>
<pre class='prettyprint lang-js'>var tree=$$.treeLayout()
// 获取根结点的方法
.root(function(initTree){
//需要返回树的根结点
})
// 获取子结点的方法
.child(function(parentTree, initTree){
//需要返回parentTree的子结点集合
})
// 获取结点ID方法
.id(function(treedata){
//需要返回当前结点treedata的id
});</pre>
<p>
首先，我们需要获取树布局对象，然后配置三个基本方法，正是因为这三个基本方法的存在，原始数据结构理论上讲，只要是一个数组即可。
</p>
<p>
接着，传递原始数据，就可以获取计算后的结果了：
</p>
<pre class='prettyprint lang-js'>var result=tree(nodes);</pre>
<p>
返回结果如下：
</p>
<pre class='prettyprint lang-js'>{
"node": Array,
"root": any,
"size": number,
"deep":number
}</pre>
<p>
其中node表示所有的树结点，记录着结点位置，使用教程中的例子：
</p>
<pre class='prettyprint lang-js'>[
"油画":{
children: [];
data: (2) ["油画", "手绘"];
id: "油画";
left: 1.5;
pid: "手绘";
show: true;
top: 1.5
},
...
]</pre>
<p>
root表示根结点id，size表示树在Y轴方向占高尺寸，和top对应，deep表示有多少层。
</p>
</body>
</html>