多级可交互树

本树的交互已由代码实现，数据由中继器记录。使用者不必添加事件等操作，只需要在中继器中录入数据即可实现多级可交互的树。效果如下视频：   

多级可交互树

本组件商品链接https://item.taobao.com/item.htm?ft=t&id=887668160484

 1、添加数据详细介绍

以企业组织架构为例，如下图：

1.1、选择中继器

本树的数据由中继器记录，首先选中中继器，步骤如下图：

1.2、添加层级

根据数据的层级数在中继器中添加相同数量的字段，如下面第一张图有5层，需要在中继器中添加5个字段，如下面第二张图的Column0、Column1、Column2、Column3、Column4。

1.3、填写数据

一级数据填写在中继器的一级字段列里、二级数据填写在中继器的二级字段列里、三级数据填写在中继器的三级字段列里，以此类推。企业组织架构数据填写在中继器中的情况如下图：

1.4、设置节点默认是否展开

如下图“is_spread”字段用于控制节点默认是否展开，填写为“1”表示展开，不写或填写为“0”表示不展开。

例如在企业组织架构中，如果展开“总经办”节点、“行政总监”节点、“人力资源部”节点、“后勤部”节点和“保卫科”节点，则在这五个数据后面的“is_spread”字段中填写1即可，如下图：

注意：若父节点设置为不展开，即使子节点设置为展开，然而子节点会受父节点影响默认为不展开。例如只将上图“总经办”节点的“is_spread”字段改为“0”或不填写。

1.5、预览结果

数据添加完成后，点击“预览”按钮即可查看多级可交互的树，结果如下图：

2、修改样式

大家绘制的原型是各式各样的，为使树符合原型的样式，树也支持修改样式，但不能随意修改，接下来说明如何修改样式：

树的样式是基于Axure中树的第一节点，也就是说在Axure中必须存在一个节点，且需要修改第一个节点的样式，这样才会在浏览器中显示预期样式的树。

2.1、修改箭头样式

箭头支持修改宽度、高度、背景色和位置。修改方法如下图步骤：

2.2、修改文本样式

文本支持修改宽度、高度、圆角、背景色、位置、字体、字体大小、字体颜色、字体是否加粗、字体垂直对齐方式和字体水平对齐方式。修改方法如下图步骤：

3、特别说明

3.1、在中继器中输入的数据，只能在点击“预览”后在浏览器中查看，并不会影响在Axure中画的树，为符合应用场景，需要手动调整Axure中的树。如下图是将行政区域树改为企业组织架构树。

3.2、若在中继器中输入很多数据，在树全部展开的情况下可能会显示在期望区域之外，影响布局。为避免这种情况，可以给树转化为动态面板，并将动态面板设置为“垂直滚动”和取消选中“自适应内容”。