編輯導(dǎo)語：合計(jì)作為日常使用頻率比較高的一個功能，但在Axure里面?zhèn)鹘y(tǒng)的表格如果做合計(jì)是很麻煩的，遇到數(shù)據(jù)多的時候很耗費(fèi)時間，那么該如何優(yōu)化，提高工作效率？本文以中繼器表格為核心，教大家如何制作一個自動合計(jì)的原型模板，希望對你有所幫助。

合計(jì)一個是很常用的功能，例如財(cái)務(wù)報表、統(tǒng)計(jì)圖表等內(nèi)容就經(jīng)常需要合計(jì)。

但是在Axure里面?zhèn)鹘y(tǒng)的表格如果做合計(jì)是很麻煩的，如果數(shù)據(jù)多的話，需要將表格每一格作為變量來寫公式，非常耗費(fèi)時間，而且不能增加行。所以這期的教程以中繼器表格為核心，教大家如何制作一個自動合計(jì)的原型模板。

一、制作完成后應(yīng)具備以下效果

1. 包括自動橫向和縱向合計(jì)
2. 可以添加行數(shù)據(jù)或修改表格中的數(shù)據(jù)，合計(jì)值也能保持自動計(jì)算
3. 底部合計(jì)隨著數(shù)據(jù)內(nèi)容的添加，自動移動到合適的位置

二、制作材料準(zhǔn)備

1. 表頭

表頭由6個矩形組成，當(dāng)然了你們可以根據(jù)自己的需要增加或減少，案例中依次為日期、商品1、商品2、商品3、商品4、和合計(jì)。文字為黑色加粗，矩形填充也是藍(lán)色，邊線顏色為淺藍(lán)色，只顯示兩側(cè)的邊線，如下圖所示擺放。

2. 中繼器

2.1 中繼器內(nèi)部材料

矩形：和表頭一樣由6個矩形組成，只不過樣式不一樣，設(shè)置矩形的填充顏色為透明色，這樣設(shè)置是因?yàn)橹欣^器可以設(shè)置背景交替的顏色，這樣兩行之間就能行程間隔顏色

輸入框：5個輸入框，作用是修改或者填寫數(shù)據(jù)，因?yàn)樽詈蟮臋M向合計(jì)是自動計(jì)算的，不需要輸入，所以只需要5個即可。放置在前5個矩形的中部，同樣設(shè)置填充顏色為透明，取消邊框。

如下圖所示擺放：

2.2 中繼器表格

共5列，依次為：

• date：對應(yīng)日期，在里面填寫具體內(nèi)容即可
• commodit1~4：商品1到4的數(shù)據(jù)，也是填寫內(nèi)容即可

3. 表尾

表尾其實(shí)就是縱向合計(jì)數(shù)，我們同樣用6個矩形來制作即可。填充顏色為藍(lán)黑色，文字為白色加粗。文字一次填寫合計(jì)、合計(jì)1、合計(jì)2、合計(jì)3、合計(jì)4、總計(jì)，具體數(shù)據(jù)后續(xù)通過交互自動計(jì)算。

如下圖所示擺放：

4. 按鈕

增加行按鈕一個。

三、交互設(shè)置

1. 中繼器載入時交互

這里我們要在中繼器加載第一行的時候（index=1），將表尾的合計(jì)1、合計(jì)2、合計(jì)3、合計(jì)4、總計(jì)這5個文本的值設(shè)為0或者空值，這個操作可以理解為歸0。

然后我們才正式開始主題，首先是設(shè)置中繼器表格內(nèi)容的文本，中繼器里面5個輸入框，分別對應(yīng)中繼器的5列內(nèi)容，我們將表格內(nèi)容設(shè)置到矩形內(nèi)一一對應(yīng)即可。橫向合計(jì)的矩形，其實(shí)就是中繼器2到5列的內(nèi)容之和，即Item.commodit1+Item.commodit2+Item.commodit3+Item.commodit4。

設(shè)置完中繼器表格的內(nèi)容就開始設(shè)置表尾的內(nèi)容，設(shè)置合計(jì)1=Item.commodit1+target.text，Item.commodit1就是中繼器商品1的數(shù)據(jù)列，target.text就是合計(jì)1這個矩形原來的值。

這里可能比較難理解，因?yàn)橹欣^器是一行一行加載的，例如，第一行的時候，因?yàn)榍懊孀隽藲w零的操作，相當(dāng)于是商品一第一行的數(shù)據(jù)640+0，所以合計(jì)1就變成640；第二行加載時，商品1的數(shù)值為9974，target.text為前面記錄的640，所以合計(jì)1就變成了9974+640=10614……直到最后一行，這樣就把縱向合計(jì)數(shù)所出來了。合計(jì)2、3、4的原理一致。

總計(jì)=合計(jì)1+合計(jì)2+合計(jì)3+合計(jì)4，我們用變量寫個簡單的公式就可以完成了。

這樣我們在表格里面默認(rèn)填寫的數(shù)據(jù)，演示預(yù)覽的時候就可以看到自動計(jì)算的結(jié)果，接下來我們要考慮的是，修改數(shù)據(jù)的時候，如果自動合計(jì)。

2. 數(shù)據(jù)變化時的交互

其實(shí)這個也是很簡單，只要數(shù)據(jù)發(fā)生了改變，我們就通過更新行的操作把中繼器里面對應(yīng)的數(shù)據(jù)更新，更新之后，中繼器會重新從第一行加載，所以又實(shí)現(xiàn)的上面的合計(jì)。

以中繼器第一個輸入框?yàn)槔?，在輸入框失去焦點(diǎn)時（修改結(jié)束的標(biāo)志），我們更新當(dāng)前行，更新的第一列date列的內(nèi)容為this.text，就是輸入框里面的內(nèi)容。

那第2、3、4、5個輸入框也是一樣的，分別對應(yīng)修改commodit1~4列的內(nèi)容即可。

3. 添加數(shù)據(jù)行的交互

當(dāng)鼠標(biāo)點(diǎn)擊添加行按鈕時，我們只需要添加一行空的數(shù)據(jù)，讓用戶填寫即可。我們用添加行事件，對中繼器添加一行空行。

用戶填寫數(shù)據(jù)后，又會觸發(fā)上面文本框失去焦點(diǎn)時的交互，在觸發(fā)中繼器每項(xiàng)加載時的交互，最終實(shí)現(xiàn)自動計(jì)算合計(jì)數(shù)的效果。

這樣我們就完成了整個模板了，將它組合在一起，以后就可以直接復(fù)制或者從元件庫用拖出來使用了，使用的時候只需要修改一下初始數(shù)據(jù)、表頭字段就可以了，是不是非常好用呢？

那以上就是中繼器表格自動合計(jì)模板的制作方法了，感興趣的同學(xué)們可以動手試試，謝謝您的閱讀。

本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自pexels，基于CC0協(xié)議