【Axure教程】能增删改的嵌套表格

梓贤Vigo

于 2025-03-13 10:53:59 发布

阅读量994

点赞数 17

文章标签： Axure 原型产品经理交互教程

本文链接：https://blog.youkuaiyun.com/mushe93/article/details/146225171

版权

今天教大家制作能增删改的嵌套表格的原型模版，模版我们是用中继器制作的，所以使用也很方便，在中继器表格里维护表格信息，即可自动生成交互效果，具体效果可以打开下方原型地址体验

【原型预览含下载地址】

https://axhub.im/ax11/38d7403ca521bca7/?g=1&p=嵌套表格_增删改

【原型效果】

展开和收起效果——点击加减号按钮可以展开或收起子级表格案例

添加部门——点击添加部门按钮，可以弹出添加部门弹窗，填写后可以将数据添加到表格中，并且会对新增的部门名称进行唯一性校验。

添加新员工——点击部门所在行的添加成员按钮，可以弹出添加员工弹窗，填写后可以将新员工数据添加到表格对应部门的子表格中，并且会对新增的员工姓名进行唯一性校验。

修改部门信息——点击部门所在行的修改按钮，可以弹出修改部门弹窗，填写后可以将数据更新到表格中，并且会对修改的部门名称进行唯一性校验。

修改员工信息——点击员工表格所在行的修改按钮，可以弹出修改员工弹窗，填写后可以将数据更新到表格中。

删除员工信息——点击员工表格所在行的修删除按钮，可以弹出确认删除工弹窗，确认后可以将该员工的信息从表格中删除。

删除部门信息——点击部门所在行的删除按钮，可以弹出确认删除工弹窗，确认后可以将该部门以及该部门对应的所有员工的信息从表格中删除。

那下面我们一起开始学习制作吧。

【制作教程】

一、材料准备

1.1 主表表头的设计

我们用矩形来制作即可，有几列就增加几个矩形，如下图所示摆放：

1.2 主表内容的设计

主表表格我们同样用矩形来制作，矩形颜色为透明，方便我们后面做移入变色，和单双行斑马线的效果，宽度和上面一样就可以了，元件我们只需要做一行，后面会放在中继器里面，然后加上按钮，包括展开收起按钮（加号和减号，需要放在同一个动态面板两个状态页中）和操作按钮（添加、修改、删除）摆放如下图所示：

需要移入变色的，可以自行增加背景矩形和交互样式，这里就不展开说明了。

1.3 子表表头的设计

我们用矩形来制作即可，有几列就增加几个矩形，如下图所示摆放：

1.4 子表内容的设计

子表表格我们同样用矩形来制作，矩形颜色为透明，方便我们后面做移入变色，和单双行斑马线的效果，宽度和上面子表表头一样就可以了，元件我们只需要做一行，后面会放在中继器里面，然后加上操作按钮（修改、删除）摆放如下图所示：

需要移入变色的，可以自行增加背景矩形和交互样式，这里就不展开说明了。

1.5 中继器的设置

将上面主表内容、子表表头和子表内容放进中继器内部动态面板，分2个状态页，第一个状态页放入主表内容和子表表头，第二个状态页放入子表内容。

我们在中继器表格里新增对应列并填写内容：

no列：对应所在行号，默认按12345……顺序填写即可

fuji：记录该行内容的父级名称，例如广州市的父级是广东省，如果本来是父级就不需要填写，填写了就对应子表格的内容。

column1~6：对应第一列到第六列的内容，这里column1会对应上面fuji列，例如这里填写采购部，那下面采购部的员工的fuji列就要填写采购，要对应上才行。

zhankai：这列用来控制嵌套表格展开还是收起，如果默认展开，例如采购部默认展开，那就要在采购部和其下所有员工的行都填写展开。如果默认收起，就不需要填写。

1.6 弹窗

我们要准备一下弹窗，分别是添加部门和添加员工信息的弹窗、修改部门和修改员工信息的弹窗、删除部门和删除员工信息的弹窗如下图所示摆放：

主要用到的元件包括，文本标签、输入框、按钮、矩形、水平线等，大家可以根据实际需要制作。

1.7 其他元件

例如添加按钮，提示等，根据自己需要添加

二、交互制作

2.1 中继器表格内容的设置

如果是Axure10或以上的版本，点击中继器表格每列的连接元件按钮，选择对应元件，就可以把中继器表格的值设置到对应元件上。如果是Axure9或以下的版本，我们就要在中继器每项加载时，用设置文本的交互，设置上去。然后我们要根据fuji列的值是否为空，来控制显示的面板状态，如果fuji列是空值，就默认显示主表内容所在的状态页，如果不为空，代表是子级表格的内容，所以我们用设置面板状态的交互，设置子表格内容的状态页显示。

这样我们就把表格内容显示出来了。

2.2控制展开和收起子表格

上面提到我们通过展开列来控制子表格是否显示，所以在中继器每项加载时，如果zhankai列的值等于展开，就默认显示子表的标题，我们用设置面板状态的交互，设置加减按钮所在的面板状态为展开页；如果值不等于展开，那就是要收起，我们就用隐藏的交互，将子表格的标题隐藏，然后设置加减按钮所在的面板状态为收起页。

鼠标单击加减按钮的动态面板时，我们要看是在什么状态，如果zhankai列的是不是展开，那相当于我们要展开他，所以我们要用更新行的交互，将当前行和子级行zhankai列的值更新为展开；如果值等于展开，相当于我们要收起他，所以我们用更新行的交互，将当前行和子级行展开列的值设置为收起。

2.3添加父级表格内容

案例中是添加部门，鼠标单击添加部门按钮时，我们用显示的交互，显示添加部门的弹窗。

提交按钮单击时，我们先判断有没有必填项没有填，案例中为部门名称必须要填写，如果未填写，就用显示的交互，弹出提示，然后判断部门是否已存在。我们可以通过筛选部门名称来判断，如果筛选后显示的数据为0，就是部门不存在，可以添加，我们用添加行的交互添加到中继器里就可以了，否则就是存在，不能添加，用显示的交互，弹出提示。

添加之前，我们还要用更新行的交互，把所有行的no列的值更新为他原来的值+1，相当于原来的123456会变成234567，在载入时我们排序的交互，让中继器按no列升序排列，添加行的时候，no列的值填写1，这样就可以添加在顶部的位置了。

2.4修改父级表格内容

鼠标单击表格里父级行修改按钮时，我们用设置文本的交互，将表格里的值设置到修改部门弹窗里面对应的输入框，然后用显示的交互，显示修改弹窗，这里我们需要记录一下修改的column1的值，因为修改部门名之后，需要通过这个记录来作为更新的条件。

填写完内容后，点击提交按钮，这里的交互和前面新增基本类似，都是先判断有没有必填项没有填，案例中为部门名称必须要填写，如果未填写，就用显示的交互，弹出提示，然后判断部门是否已存在。

先判断填写后的部门名和记录的部门名是否一致，如果一致，我们就用更新行的交互更新就可以了。

如果不一致，我们也是要通过筛选部门名称来判断信的部门名是否重复，如果筛选后显示的数据为0，就是部门不存在，我们就用更新行的交互更新，否则就是存在，不能更新，用显示的交互，弹出提示。这种情况和上面添加行的思路是一样的，不同的是最后的交互变成更新行，更新的话除了更新当前行内容，还要更新所有该行的子级行fuji列的内容。

2.5 删除父级内容

鼠标单击父级行所在的删除按钮，用显示的交互显示确认弹窗，这里同样需要记录需要删除的行号和部门名（column1的值）。确认后，我们用删除行的交互，删除该行和对应的子级行内容，最后隐藏弹窗即可。

2.6 新增子级内容

我们可以点击父级行所在的添加成员的按钮，添加新的员工。我们要先记录该行的行号，然后先用显示的交互，显示添加员工的弹窗。填写完成后，提交按钮单击时，我们也是先判断有没有必填项没有填，案例中为员工工号和名称必须要填写，如果未填写，就用显示的交互，弹出提示。

然后判断员工工号是否已存在。我们可以通过筛选员工号来判断，如果筛选后显示的数据为0，就是部门不存在，可以添加，我们用添加行的交互添加到中继器里就可以了，否则就是存在，不能添加，用显示的交互，弹出提示。

添加之前，我们还要用更新行的交互，把所有行号大于该行的no列的值更新为他原来的值+1，例如点击的是no值为5的质检部，然后将6789……行更新为78910行，这样就空出了第六行，这行就是新内容添加的序号。在添加行的时候，no列的值填写记录的no值+1，这样就可以添加在父级行的下一行。完成后移出筛选即可。