Axure高保真教程：多层级动态表格

多层次表也叫树表，是后台经常使用的一种表，在表中有多个层次的关系时，可以利用多层表，让数据的内容更清楚地展现出来，便于人们对数据间的联系进行更好的了解与分析，以便更好地将信息传递出去。 因此，笔者将教你如何在 Axure中创建多层次的动态表，包括扩展，折叠，添加，修改，删除等效果。 

一、效果展示

 1、可以点击箭头展开或者收起子级内容 

2、可以动态修改表格内容 

3、可以在指定位置动态增加同级节点或子级

 4、可以删除多余的内容 原型地址：https://nme9lo.axshare.com/#g=1&p=树形表格_增删改

 二、制作教程 

1. 材料准备 

1.1 表格表头部分 表头部分我们用多个矩形组合即可。

 1.2 表格内容部分 表中的内容是由转发器构成的，转发器内的每个格与上边的表头每格之间的间距相同。制作一棵树的结构，由矩形，箭头（放在动态面板里的两种状态，分别是打开和收起，在动态面板里放向下的箭头，往内放向右的箭头），图像元素，文本标签，动态面板，热区（功能是增加箭头的点击范围。）排列方式如下： 第2到6列我们用和表头对应宽度的矩形即可。 最后一列操作列，我们增加几个图表，如下图所示摆放： 再添加一个背景矩形，用于在鼠标移动时改变颜色，以及在鼠标点击后选择颜色。因此，我们要对鼠标移动的风格和选择的风格进行设定，至于风格，你自己看着办吧。 

我们将所有组件合并在一起，选中多个选项，让内置组件触发互动效果，选中后，鼠标移动到该选项上，背景长方形的悬浮风格就会自动启动，不会被上面的元素阻挡。 增音机表我们需要下列栏： no列：代码第几行按123456……顺序填写即可，后续用于拆入行的排序 tree1-tree6列：对应树节点的内容，可参考下方案例按照树的层级填写即可。案例中最高是6级的树，如果需要增加更多层级，也可以自行添加列和后续交互。 

b2-b6列：对应表格里第2到6列显示的内容 jiantou列：控制该节点是否有箭头，默认有箭头，如果没有箭头就填无箭头。 xianshi列：控制该节点内容是否显示，默认显示，如果默认不显示就填写隐藏。 xuanzhuan列：控制该节点箭头的方向，默认向下打开，如果默认向右收起就填写收起。 bianse列：控制该节点是否被选中变色，默认未选中，如果需要选中就填写1。 这样材料就设置好了。

如果您需要相关服务，可以找天津天迅达科技有限公司，我们的业务有Web开发、iOS APP、Android APP、微信开发、HTML5开发等，天迅达——您身边的App个性化定制专家！

1.3 添加和修改节点弹窗 我们需要做3个弹窗，其中包含了添加同等级节点、添加子节点和修改节点三个，其中以文本标签、按钮、输入框为主，如下图所示。 做好之后我们组合转为动态面板，默认隐藏，固定在屏幕中部。 

1.4 删除节点弹窗 删除节点弹窗会相对简单，只需要确定是否删除即可，我们用矩形、按钮和文本标签搭建即可：

 2. 设置交互 

2.1 设置表格内容 第一栏是关于树元之间的相互作用，具体内容请参看我以前的一篇《用中继器制作树元件》，这本书中详细说明了如何利用中继器来制作树状元件。 当每个增音机装入时，若为axure10，我们只需按一下转发器表中的连接键，就可以把b-2至b6栏的数值设定成转发器相应的长方形内容；如果是axure8或者9，则需要用到文字设定功能，把b2列到b6栏的内容设定成相应的长方形元素。 这样表格的内容就出来了。

 2.2 添加子级节点 点击添加子级按钮时，例外，我们要新建几个默认隐藏的文本，用设置文本的交互，记录tree1到tree6的结构。然后用显示的交互，将添加同级节点的弹窗显示出来。 如果要返回一个节点的信息，比如 ABC总部-广东分部-财务部，那就需要按照级别来写，并通过设置文字的方式，将其设置到相应的零件上，这是可以选择的，也可以不选择，这也是后续的优化。 

在增加子节点窗口中的确认按键，当鼠标点击时，我们会通过增加一行的互动，来更新输入箱中的资料，并把它放进增程表中。 这是一个很大的问题，我们在中继器中的第一个字“no”就是用来进行排序的，因此，当中继器加载的时候，我们使用了一个“加”的互动，把相应的“no”列按照上升的顺序排列。 

然后我们可以修改序列号，让它在相应的位置进行拆分。 在情况下，增加子结点是在所有子结点之后增加的，因此，我们将基于先前从tree1到tree1到6的记录进行过滤，看最后一个子结点的序列号。 因此，我们在装载转发器的时候，会使用一个隐藏的文字记录相应的序列号。 

因此，我们需要首先过滤掉中继，比如 ABC总公司-广东分公司-财务部门下面增加一个新的职位，然后再从 ABC总公司-广东分公司-财务部门中筛选出一个数字，然后再从下面的数字序列中提取出这个数字。因此，每个级别的筛选标准都不一样，我们拿5个级别作为例子，由于在每个级别中都有6个级别，5个级别是最后一个可以增加子级别的。 

这就是它的过滤标准，从LVAR1到5都是我们前面记录的 tree列，TargetItem.tr ee 1==LVAR1&&TargetItem.tr ee 5==LVAR2&&TargetItem.tr ee 4==LVAR4&&TargetItem.tr ee 5==LVAR5. 一级目标为目标项. tr ee 1==LVAR1，二级为目标项. tree1，目标项. tr ee 2，以此类推。 当筛选完毕，得到最后一行文字后，我们再通过更新行，将每一行的 no值都加上1，比如最后一行为10,11以后的所有行，都加上1，这样就得到12,13,14，还剩下11。 我们通过增加一些行，把 no+1加到 no栏中，比如10+1等于11，再加上先前记录的 tree栏和输入箱的值。

至此，增加就完成了。 但这也带来了一个问题，由于增加了一个子元素，父元素的指向是未知的，并且如果原本的父元素没有子元素，那么元素元素就不会有箭头元素，如果元素元素是元素元素，元素元素元素元素将会被忽略。 因此，我们使用了一种非常简便的方法，即，将父行升级为向右的箭头，然后再将父行下一层的内容设为缺省显示，在此，只需对行进行更新即可。 

完成之后记得要移除筛选。 在弹窗隐藏时，我们要做一个重置还原的操作，就是把输入框里的内容清空，不然下一次进来就会有上一次的内容。 这样我们就完成了增加子级节点的操作了，当然了，我们在这之前还可以增加对文本框是否必填的条件判断，例如文本为空时，点击确认按钮弹出对应的提示弹窗，这些可以根据需要添加。

 2.3 添加同级节点 这与前面的想法基本相同，只是由于添加了同等级的元素，因此不用再去考虑父元素是否带箭头，也不用担心箭头指向的问题。这就相当于，按照树的层次，计算出每一个子节点的最终 no值，再将大于 no的那条线的 no值全部加上1，再通过增加行的交互，增加相应的数值。这是一个简单的例子。

以上所有设计图和部分文字均来自网络，如有侵权，请call我删除，感谢~

天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。

标签：天迅达科技 天津APP开发 天津网站建设 网站建设