新手工作表格制作教程

树形表格常用于处理有结构性的表格数据，例如像分行支行有明显上下级别的数据，就比较适合用树形表格的方式查看，可以直接查看分行数据，也可以打开对应分行，下钻查看支行的数据。

今天作者就教大家如何在Axure中制作一个多选树形表格的原型模板。

一、效果展示

1. 点击表格左侧箭头，可以展开或者收起该行内容的子级内容
2. 点击父级行的多选按钮，可以选中或者取消选中当前行内容以及子级行内容
3. 点击子级行的多选按钮，可以选中或取消选中当前行的内容，并且根据子级选中的数量自动反选父级行。

二、制作教程

制作材料包括中继器、多选按钮、箭头形状、矩形、文本标签。

1）表头

表头我们用几个矩形来制作即可，表格有多少列就用多少个矩形拼接。

2）表格内容

表格内容我们用中继器制作，内容包括箭头形状、多选按钮、矩形和文字标签，如下图所示摆放：

多选按钮——这里我们的多选按钮不是用自带的多选按钮，因为自带的多选按钮只有2中状态（已选和未选），我们需要用三种状态（已选、半选、未选），所以我们需要自制多选按钮，我们用动态面板制作即可，在三个state里面分别放入已选、半选、未选的图片或者形状即可。

背景矩形——我们用背景矩形包裹住整行的内容，至于底层，需要增加一个选中样式（浅灰）和禁用演示（浅蓝），选中样式用于和一级行区分，禁用演示是后续制作鼠标移入行时变蓝的效果

中继器表格——表格里需要文字列和功能列，文字列就是column1~6分别对应表格1-6列显示的内容，功能列包括：shangyiji列，用于记录该子级的父级，这里需要和column1的父级对应；jiantou列，用于控制是否显示箭头，父级行填写1，子级行或者没有子级的父级行不需要填写；fangxiang列用于控制箭头方向，如果箭头默认都是向右的，不填就可以了，如果向下就填1；xianshi列，控制那行内容显示出来，一般父级内容默认显示填写1，子级默认隐藏就为空，当然子级也可以默认显示，这里要配合箭头方向填写默认值即可，例如子级默认显示，父级箭头对应应该默认向下打开，填写1；xuanzhong列，用于该行是否被选中，默认为空即可，代表未选中，也可填写全选或者半选，后续会通过交互设置选中按钮到对应的状态。

1）中继器每项加载时交互

我们用设置文本的交互，把中继器column1~6里面的值，设置到中继器表格里对应的矩形内。

如果jiantou列的值不等于1，那我们就用显示隐藏的交互，把箭头隐藏起来即可；

如果fangxiang列的值等于1，这代表箭头应该向下，所以我们用旋转的交互，将箭头旋转到向下；

如果xianshi列的值不等于，代表该行数据被收起，暂不显示，所以我们用隐藏的交互将该行数据影藏起来；

如果shangyiji列的值不等于空，就代表该行是子级行，有对应父级。所以我们用选中的交互，选中背景矩形，因为前面设置了交互样式，所以这样子级行就会变成灰色和负极行区分开。

如果xuanzhong列的值为全选，代表选中按钮被选中，我们用设置面板状态的交互，将他设置到全选的状态；xuanzhong列的值为半选，代表子级有选中的，但是不是全部子级都选中，所以我们用设置面板状态的交互，将他设置到半选的状态

2）鼠标移入中继器内行组合时

我们用禁用的交互，将背景矩形禁用，这样就会有移入变蓝的效果；

3）鼠标移出中继器内行组合时

我们用启用的交互，将背景矩形启用；

4）鼠标单击箭头时

我们要根据箭头的方向来判断，我们可以根据fangxiang列的值判断箭头的方向。

如果箭头是向下的，那我们就要让箭头向右，并且把子级行收起，这里我们用更新行的交互，将当前行方向列的值设置为0，然后在用更新行的交互，把shangyiji列里内容为当前行内容的行找出来，更新目标行xianshi列的值为0。

相反，如果箭头是向右的，那我们就要让箭头向下，并且把子级行展开，这里我们用更新行的交互，将当前行方向列的值设置为1，然后在用更新行的交互，把shangyiji列里内容为当前行内容的行找出来，更新目标行xianshi列的值为1。

5）鼠标点击未选按钮时

如果点击的是父级行，就是没有上一级，就相当于是从未选中变成选中，同时，我们要把该行对应的子级行选中。所以我们用更新行的交互，更新当前行xuanzhong列的值为全选，在更新子级行shangyiji列的值等于该行的值的行，把xuanzhong列的值更新为全选。

如果点击的是子级行，我们就用更新行内容将当前行xuanzhong列的值更新为全选，然后我们还需要做一个判断，判断是不是所有父级的子级都被选中，这里涉及到一个设计选中数的逻辑交互，就是我们需要新建一个记录文本，记录选中的数，中继器开始加载时设置为0，然后每有一行的值为全选，我们就在原来基础上+1，这样就可以判断选中数了。所以我们先筛出和当前行同一个父级的子级，然后在判断选中数。

那如果记录选中数和中继器表格看到的行数一样，就代表全部的子级都被选中，我们用更新行的交互，更新对应的父级行xuanzhong列的值为全选；

如果记录选中数和中继器表格看到的行数不一样，并且记录数大于1，代表有部分子级被选中，我们用更新行的交互，更新对应父级行xuanzhong列的值为半选；

如果记录数等于0，就是一行都没有被选中，我们用更新行的交互，更新对应的父级行xuanzhong列的值为未选；当然在选中时不会出现该情况，但是在后面取消选中的时候会，所以我们写好这个交互，后续直接触发就可以了；

最后我们移除对中继器的筛选：

6）鼠标点击半选按钮时

这里和上面思路基本一致，但是比上面要简单，因为半选按钮只有父级行才会出现，所以理论上我们不需要判断是否为负极，我们直接用更新行的交互，更新当前行xuanzhong列的值为全选，在更新子级行shangyiji列的值等于该行的值的行，把xuanzhong列的值更新为全选。

当然了，如果你懒的话，也可以直接复制鼠标单击未选按钮时的交互，复制过来，也可以通用。

7）鼠标点击全选按钮时

这里代表我们要从选中变成未选中，这里同样要分父级行和子级行进行判断，也是通过判断shangyiji的值是否为空，如果为空，就代表没有父级，那他就是父级。这是我们要用更新行的交互，讲当前行xuanzhong列的值设置为未选，同时将该行子级行xuanzhong列的值也设置为未选状态。

如果点击的是子级行，我们先用更新行的交互，将该行xuanzhogn列的值设置为未选。然后在判断对应父级行是半选状态还是未选状态，这里和上面鼠标单击未选按钮的思路是一样的，都是先筛选出和该行相同父级的子级，然后通过记录数和表格可视行数的关系，对负级行进行一个反选的操作。

这样我们就制作完成了多选树形表格的原型模板了，下次使用时，只需要在中继器表格里填写对应信息，预览是即可自动生成交互效果，包括树形展开或折叠，选中、全选、取消选中或全部取消、移入行高亮显示……

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

吴会桦661电脑最基础的制作表格怎么做 -
宋褚盲18654171439 ______ 现如今,不论做什么工作都是需要电脑完成,像平时登记人员、账单记录等都需要表格制作,接下来发兔就给大家说说,如何在电脑上制作简单的表格?

吴会桦661怎样制作表格步骤 -
宋褚盲18654171439 ______ 方法一:用word软件来制作表格 1.打开Word 2007,点击＂插入＂选择卡中的＂表格下拉列表＂,然后在出现表格中随意滑动来确定要绘制的表格的大小,最后点击以完成单元格的绘制工作. 2.也可以通过设置窗口来实现表格的插入.具体...

吴会桦661有详细的制作表格入门最最基础的方法吗?? -
宋褚盲18654171439 ______ 当然有, 不过对你而言,最好是你想象一个最最基础的表格, 然后在这里讲出来, 路过的人好告诉你怎么做, 并且你必须的亲自做一遍, 也唯有这样,才算是所谓的最最基础的方法.

吴会桦661如何制作工作表格步骤 -
宋褚盲18654171439 ______ 请楼主再详细描述下,要做什么样的工作表格 一般简单就是行列填写下,然后充斥内容即可 跟手头纸质的表格类似 如果需要计算,那么看计算什么,怎么用公式了

吴会桦661怎么制作表格? -
宋褚盲18654171439 ______ 那你打算用什么制作??excel还是word?如果你所做的表格不进行加减等运算和排序的话,那你用word,若要进行各种运算或者排序或有些变化,那你用excel. word:先点击表格,在下拉菜单中点击插入,写上你需要8行,8列.然后就会出现在面板上,然后输就行了.然后自己用鼠标放在表格的横线或竖线上进行拉动,让它变成你想要的大小就行了.(如果只是保密卡那样用这个就行) excel:它本身就是表格,所以首先你直接输就行了,不过它上面的线是虚的,打印的时候不显示表格线,所以你需要选中你的整个输有文字的表格框,然后右击鼠标选择＂设置单元格格式＂在里面有＂边框＂,你可以设置外边框以及里面的线条.多试几次你肯定能学会的,没问题.

吴会桦661电脑怎么制作表格,新人小白.在线等 -
宋褚盲18654171439 ______ 要添加边框才能打印出格子. 选中要添加格子的单元格,单击右键,选中单元格格式,在边框中添加.

吴会桦661表格制作教程. -
宋褚盲18654171439 ______ 编辑技巧 2.单元格内容的合并 3.条件显示 4.自定义格式 5.绘制函数图象 6.自定义函数 7.矩阵计算 8.自动切换输入法 9.批量删除空行 10.如何避免错误信息 11.宏的使用 12.图标的应用技巧 http://www.hongen.com/pc/oa/excel2k/ex2k1301.htm --------...

吴会桦661表格的制作方法 -
宋褚盲18654171439 ______ 当今时代,电脑已经是我们日常工作、学习和生活中不可或缺的伙伴,许多人都会使用电脑制作表格,但制作一个令人赏心悦目、精美的标准表格并非人人都会.本节将向同学们简要介绍制作表格的一些基本方法和技巧. 本节以制作《**市信...

吴会桦661我想学怎么做表格.
宋褚盲18654171439 ______ 最简单的办法,不要去看什么书和教程之类的,基本没有什么用,直接是找点表格,或者别人做好的表格,自己摸索着做,找指令摸索,不会再问问别人,比看书有效,熟能生巧.

吴会桦661在工作中怎么制作表格 -
宋褚盲18654171439 ______ 表格是指EXCEL吧..其实很简单,搞好工具栏就可以了..不会的话,工具栏中的按钮都点一下...认识一遍...相信你会继续进步..特别是下图的红图那一行工具..一定要熟练运用..