表格制作模板

制作完成之应具备以下交互效果：

1. 点击箭头可以展开或者收起对应的内容
2. 数据维护在中继器表格内维护，填写内容后自动生成表格和交互
3. 可以自由控制初始表格显示或收起的内容

原型地址：https://r4neb0.axshare.com/#g=1

那接下来，我们以银行基础指标的树形表格为案例教大家制作树形表格。

一、基本材料的准备

这个原型里我们主要用到的元件包括：中继器、矩形、三角形状（箭头）

矩形我们主要用于制作表格的表头和内容：

表头我们有多少列就用几个矩形，具体尺寸和样式可以自行设置；

中继器表格里，我们需要放置用到矩形、三角形状（箭头）、文本标签制作，里面的矩形和表头的各个矩形的宽度要对应好，这样才能够对齐，最后一个矩形对应的是操作（查看列表），所以我们要增加悬停样式——下划线，这样鼠标移入就有一个可以点击的交互样式。表格内容的矩形设置为透明，然后我们在他们底部增加一个大矩形，默认透明，选中样式是灰色，禁用样式是浅蓝色，这里主要是做一个变色的效果。将上述元件组合好，如下图所示摆放：

中继器表格里我们需要增加以下几列的内容：

Column1~6：这里对应表格1~6列展示的内容，大家可以根据实际需要增加或者减少列数

jiantou：这里我们用这个值来空时该行是否显示箭头，如果值为1就显示箭头，否则就隐藏箭头，后续我们会通过交互实现。案例中如果是一级分行就是有对应的二级支行，所以分行的jiantou值都填写1，支行的jiantou值都默认为空值

fangxiang：这里是控制箭头方向的值，后续通过交互实现，箭头向下（打开下级内容）就填1，默认向右（隐藏下级内容）就不需填写。这里一般都是默认为空即可

xianshi：控制该行内容是否显示，后续通过交互实现，一般一级默认显示填写1，二级默认隐藏就不需要填写，当然如果你想二级默认显示也可以填写1，这里箭头的方向也要对应修改。

shangyiji：该行对应的的父级是什么，这里对应的是Column1，如果是第一级（没有父级）就不需要填写。

二、交互的设置

设置文本：我们用设置文本的交互，将Column1~6的值设置到表格内对应的矩形元件里

隐藏箭头：这里要添加一个条件判断，如果jiantou列的值不等于1，那么我们就用隐藏的交互将箭头隐藏即可。有的同学可能会问，那么如果jiantou的值等于1，那是不是需要用显示的交互，将箭头显示出来呢？其实并不需要，因为箭头默认就是显示的，所以写不写并没有影响

旋转箭头：同样我们要根据fangxiang列的值来添加条件判断，如果方向列的值等于1，那我们就用旋转的交互，把箭头旋转到向下的文字，案例中用的箭头素材是0°的时候就是向下的，所以我们用选择到达，度数为0°，这里不同的素材会有不同，具体旋转的度数根据实际素材来设置。和上面道理一样，我们只需要写箭头向下的交互，因为默认就是向右的，如果上面条件不符合，就默认向右了

隐藏组合：这里是根据xianshi列的值来添加条件，如果显示列的值不等于1，那么我们用隐藏的组合把中继器内的整个组合隐藏起来即可

选中背景矩形：这里是希望二级行的也和一级行的颜色有所区分，所以前面我们在材料准备的时候就把背景矩形的选中颜色设置为灰色，所以我们只需要根据他是否有上一级来决定是否需要控制他选中变色。我们增加条件，如果有上一级我们就用设置选中的交互，将矩形设置为真就可以了

鼠标移入组合时，我们对应行有一个高亮变色的效果，本来应该用选中的样式的，但是前面用了选中的样式来区分1级和2级行的颜色了，所以这里我们就用禁用样式来代替。

鼠标移入时：我们用禁用的交互将背景矩形禁用，这样他就会有一个变色的效果

鼠标移出时：我们用启用的交互将背景矩形启用，这样他就回复之前的样式

这里我们要分条件来说明；

第一种情况鼠标单击之前如果箭头是向下的，那么我们要首先把箭头变成向右，那么我们前面设置了箭头方向是取决于jiantou列的值的，所以我们用更新行的交互，把jiantoulie的值更新为0，这样他就向右了。除了要改变箭头列的值，我们还要把子级隐藏起来，那我们又知道一行是否显示，是通过xianshi列来控制的，所以我们把所有对应的子级的xianshi列的值更新为0即可，对应的条件就是，子级行里的shangji列的值跟当前行第一列的显示的分行值是一样的。

第二种情况就是和上面是相反的，即点击之前箭头是向右的，那么我们就把箭头变回下，所以我们用更新行的交互，把jiantoulie的值更新为1。然后我们还要把对应的子级显示出来，所以我们把所有对应的子级的xianshi列的值更新为1即可,对应的条件也是不变的。

这样我们就完成树形表格原型模板的制作了，以后使用时只需要在中继器表格里填写内容，就可自动生成树形表格，是不是很方便呢。

那以上就是用中继器制作树形表格原型模板的全部内容了，感谢您的阅读，我们下期见。

本文由 @Axure高保真原型 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。

终送显3720Excel表格模板制作 -
崔建泪19688413457 ______ 在做好Sheet1后,在Sheet1处单击右键--移动或复制工作表---建立副本 然后再单击右键重新给Sheet1(2)命名 就可以了

终送显3720这样的电子表格如何做?有模板吗?
崔建泪19688413457 ______ 说明: 1、在E4输入公式“=IF(AND(C4=＂＂,D4=＂＂),＂＂,E3+C4-D4)”,向下复制到需要处如E15. 2、当C或D列输入数据,E列将自动结出余额,如黄色区域. 3、E4公式也可以改为“=IF(AND(C4=＂＂,D4=＂＂),＂＂,$E$3+SUM(C$4:$C4)-SUM(D$4:$D4))”,按上述1、2步骤操作,结果如《sheet2》绿色区域. ★类似表格,可自行按需要设计,不需模版.

终送显3720怎么用excel制作表格 -
崔建泪19688413457 ______ excel本身就是表格,只不过没有边框罢了,我们只需加上边框即可: 1、首选全选部分单元格; 2、右键点击圈选的单元格; 3、选择设置单元格格式; 4、点击边框; 5、分别点击 外边框 内部; 6、点击确定后,表格就出现了,可以根据需要更改表格边框的类型;

终送显3720excel表格样式 -
崔建泪19688413457 ______ 在excel中->选择{文件}->{另存为}->在保存类型中选择模板文件保存,就可以了

终送显3720电子表格怎么做/ -
崔建泪19688413457 ______ 打开电子表格——先设置页边距——就会有虚线框出现——你在虚线框内编辑——不要超出虚线框外——不然超出部分打印不出来的——第一行一般都是标题行——从第二行或者第三行开始——输入你的资料,不论有多少列,都必须在虚线框内...

终送显3720Excel怎么做表格 -
崔建泪19688413457 ______ 1、右击电脑桌面空白的地方,有一个新建,点击新建,再点击Microsoft Office Excel 2007 Workbook,再打开新建 Microsoft Office Excel 2007 Workbook;2、打开Microsoft Office Excel 之后,选中最上面5行单元格,需要的表格有几个项目,就选...

终送显3720模板快速制作软件 - 用WPS表格软件制作的表格如何作为模板.
崔建泪19688413457 ______ 我没用过WPS软件,不过我想你可以试试以下操作:保存/选择保存类型为文档模板/输入文档名称确定就可以了.因为微软的office软件是变样做的,WPS也不会有太大的差别.祝好运!

终送显3720如何制作空白表格模板 -
崔建泪19688413457 ______ 首先肯定是几行几列的,单元格边框线画好,该合并单元格的合并单元格;调理的调理!就行啦!!

终送显3720哪位高手知道怎么做WORD或是EXCEL模板? -
崔建泪19688413457 ______ 把格式弄好后,文件——另存为,在下边“保存类型”一项上选模板就行了.

终送显3720excel表格制作 -
崔建泪19688413457 ______ 做好一张表并调整好格式后,直接将表格所在行全行复制、粘贴到下面的行次中.最后中间空两行,在两行中划一条线.打印之后以这条线为裁剪线,如果想在A4纸中正好在三分之一的位置则需要自己调试了,这...