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

2024-03-1813:27:06原型设计Comments272 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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

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

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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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。

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

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

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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-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

Axure多层级动态树型表格高保真教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

这样我们制作完成了,下次使用时,我们只需要修改中继器表格里数据,就可以生成含交互效果的多层级的动态增删改的树形表格了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

作者:AI产品人文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/62412.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/62412.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定