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

2024-03-1813:27:06原型设计Comments423 views字数 3602阅读模式

多层级表格又成为树形表格，是在后台常用的一种表格形式，当表格数据存在多层级关系是，可以通过多层级表格，从而更加清晰的呈现数据内容，帮助人们更好地理解和分析数据之间的关系，从而更加有效地传递信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

所以今天作者就教大家怎么在Axure里制作多层级动态表格，包括展开、折叠、增加、修改、删除等效果，具体效果如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

一、效果展示

1、可以点击箭头展开或者收起子级内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

2、可以动态修改表格内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

3、可以在指定位置动态增加同级节点或子级文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

4、可以删除多余的内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

原型地址：https://nme9lo.axshare.com/#g=1&p=树形表格_增删改文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

二、制作教程

1. 材料准备

1.1 表格表头部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

表头部分我们用多个矩形组合即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

1.2 表格内容部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

表格内容部分我们用中继器制作，中继器内每格和上面表头每格的距离一样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

第一列我们是做树的结构，包括矩形、箭头（放在动态面板里的两个状态，分别是展开和收起，在里面分别放置向下的箭头和向右的箭头）、图片元件、文本标签、动态面板、热区（作用是扩大箭头点击的范围。），如下图所示摆放：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

第2到6列我们用和表头对应宽度的矩形即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

最后一列操作列，我们增加几个图表，如下图所示摆放：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

然后增加一个背景矩形，作用是鼠标移入时变色，和鼠标单击之后选中变色，所以我们要设置一个鼠标移入的样式和选中的样式，具体样式你们根据需要设置就可以了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

我们把所有元件组合，勾选允许内部元件触发交互效果的多选按钮，勾选之后鼠标移入这个组合，背景矩形的悬停样式就可以自动触发，而不会被上方元件挡住。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

中继器表格我们需要以下几列：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

no列：代码第几行按123456……顺序填写即可，后续用于拆入行的排序
tree1-tree6列：对应树节点的内容，可参考下方案例按照树的层级填写即可。案例中最高是6级的树，如果需要增加更多层级，也可以自行添加列和后续交互。
b2-b6列：对应表格里第2到6列显示的内容
jiantou列：控制该节点是否有箭头，默认有箭头，如果没有箭头就填无箭头。
xianshi列：控制该节点内容是否显示，默认显示，如果默认不显示就填写隐藏。
xuanzhuan列：控制该节点箭头的方向，默认向下打开，如果默认向右收起就填写收起。
bianse列：控制该节点是否被选中变色，默认未选中，如果需要选中就填写1。

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

这样材料就设置好了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

1.3 添加和修改节点弹窗文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

我们要做3个弹窗，包括增加同级节点，增加子级节点，修改节点三个，里面主要是用文本标签、按钮、输入框来制作，如下图所示摆放：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

做好之后我们组合转为动态面板，默认隐藏，固定在屏幕中部。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

1.4 删除节点弹窗文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

删除节点弹窗会相对简单，只需要确定是否删除即可，我们用矩形、按钮和文本标签搭建即可：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

2. 设置交互

2.1 设置表格内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

第一列我们要写一个树元件的交互，具体的可以参考我之前写的文章《用中继器制作树元件》，里面有详细的讲解怎么用中继器制作树元件的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

中继器每项加载时，如果是axure10，我们可以直接点击中继器表格的链接按钮，将b2到b6列的值设置的中继器对应的矩形内容；如果是axure8或9就要用用设置文本的交互，将b2列到b6列对应的内容设置到对应的矩形元件里。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

这样表格的内容就出来了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

2.2 添加子级节点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

点击添加子级按钮时，例外，我们要新建几个默认隐藏的文本，用设置文本的交互，记录tree1到tree6的结构。然后用显示的交互，将添加同级节点的弹窗显示出来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

然后想返回节点信息，例如ABC总公司-广东分公司-财务部这种格式，就要根据所在层级写条件，用设置文本的交互，设置到对应的元件，这个可做可不做，算是后面的优化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

添加子级节点弹窗里的确认按钮鼠标单击时，我们用添加行的交互，将输入框里的数据，更新到中继器表格里。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

这里就会涉及排序的问题，我们中继器表格里第一列no就是用于排序的，所以在中继器载入时，我们用添加排序的交互，对应no列就行升序排列。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

那这样我们就可以通过更新序号，做到在对应位置拆入行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

案例中添加子节点是在所有子节点的最后添加的，所以我们要根据前面记录到tree1~6来做一个筛选，看看最后一个子节点的序号是多少。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

所以我们在中继器每项加载时，用一个隐藏文本记录对应的序号。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

这样，就可以记录到显示的最后一行的序号，但是默认的是整个表格最后一行的序号，所以我们要先对中继器进行筛选，例如在ABC总公司-广东分公司-财务部下方添加新岗位，那我们就对ABC总公司-广东分公司-财务部进行筛选，就可以得到财务部下方，最后一行数据的序号。所以对于不同的层级，会有不同的筛选条件，我们以第五级为例，因为案例中最高6级，所以第五级是最后一个可以添加子级的层级。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

筛选条件就是这个，LVAR1到5就是我们之前记录tree列的值，TargetItem.tree1==LVAR1&&TargetItem.tree2==LVAR2&&TargetItem.tree3==LVAR3&&TargetItem.tree4==LVAR4&&TargetItem.tree5==LVAR5.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

如果是1级就是TargetItem.tree1==LVAR1，2级就是TargetItem.tree1==LVAR1&&TargetItem.tree2，如此类推。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

筛选完成获得最后一行文本之后，那我们用更新行的交互，将对应比no值大的行的no值都加1，例如最后一行是10，那11以后得行，序号就都加1，就变成12、13、14，空出来了一个11。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

我们在用添加行的交互，将no+1，例如10+1等于11添加到no列里，然后前面记录的tree列的值，以及输入框的值都添加上去即可。这样就完成添加了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

但是这里还有一个问题，因为添加的是子级，所以不知道父级箭头的方向，而且如果父级原来没有子级，就会没有箭头，如果默认是收起，新增的这行就应该默认不显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

所以我们用一个简单的方式将，父级行更新为右箭头和展示，这样我们还要将父级行下一级的内容设置为默认显示，这里通过更新行的交互就可以实现了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

完成之后记得要移除筛选。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

在弹窗隐藏时，我们要做一个重置还原的操作，就是把输入框里的内容清空，不然下一次进来就会有上一次的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

这样我们就完成了增加子级节点的操作了，当然了，我们在这之前还可以增加对文本框是否必填的条件判断，例如文本为空时，点击确认按钮弹出对应的提示弹窗，这些可以根据需要添加。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

2.3 添加同级节点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

这里和上面的思路基本上是一致的，只是因为增加的是同级，所以不需要考虑父级有没有箭头，以及箭头方向的问题。相当于只需要根据不同树的层级，获取到子级最后的no值，然后将大于no值的行的no值都加一，在用添加行的交互，添加对应的值即可。这个比上面还要简化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

2.4 修改节点内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

修改节点和添加同级节点很相似，但是也有不同。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

鼠标点击修改节点按钮的时候，我们除了要记录tree列数的值之外，我们还要将表格的值设置到对应的输入框里，b2到b6直接设置就可以了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

树节点的值，我们要根据所在是第几级为条件，设置对应tree列的值，例如是在第6级，就将tree6的值设置到第一个输入框；如果是在第5级，就将tree5的值设置到第一个输入框……文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

在修改节点弹窗确认按钮鼠标单击时，我们根据所在tree的层级进行更新行就可以了，更新对应行的内容为对应输入框里的内容。这里有一点要注意的，如果更新了第一列树节点的内容，按我们还要更新他的子节点，例如财务部改名为财会部，这样如果我们值更新财务部这一行的话，那他原本的子级例如财务会计，还是跟在原来的财务部下面，所以他所有的子级也要一同更新。这里我们根据所在层级，写不同的更新条件即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

2.5删除节点内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

点击删除按钮后，和前面一样，先用设置文本记录tree列的值，然后弹出删除确认的按钮。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

点击确认按钮后，根据所在的层级，用删除行的按钮，将他以及对应子级删除即可。例如他是1级，ABC公司，那删除条件就是tree1==LVAR1，LVAR1就是记录tree1的值；如果是2级，例如ABC公司-广东分公司，那删除条件就是tree1==LVAR1&&tree2==LVAR2……文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

删除之后，我们还要做一个判断，就是删除的这个是否是父级节点的最后一个，例如说财务部下面有财务会计岗位，那如果是唯一的岗位，删除之后，财务部级没有子级了，理论上就不应该有箭头。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

所以我们根据所在层级，对他的父级先进行筛选，例如是删除的是ABC公司-广东分公司，我们就对ABC总公司进行筛选，用然后用visiblecount函数可以获取到筛选后有几条数据，如果只有1条，就代表只有父级这个节点，没有其他子级了，我们就用更新行的交互，将他jiantou列的值更新为无箭头，完成之后移除筛选即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html