中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：合計作為日常使用頻率比較高的一個功能，但在Axure里面傳統的表格如果做合計是很麻煩的，遇到數據多的時候很耗費時間，那么該如何優化，提高工作效率？本文以中繼器表格為核心，教大家如何制作一個自動合計的原型模板，希望對你有所幫助。

合計一個是很常用的功能，例如財務報表、統計圖表等內容就經常需要合計。

但是在Axure里面傳統的表格如果做合計是很麻煩的，如果數據多的話，需要將表格每一格作為變量來寫公式，非常耗費時間，而且不能增加行。所以這期的教程以中繼器表格為核心，教大家如何制作一個自動合計的原型模板。

一、制作完成后應具備以下效果

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

二、制作材料準備

1. 表頭

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

2. 中繼器

2.1 中繼器內部材料

矩形：和表頭一樣由6個矩形組成，只不過樣式不一樣，設置矩形的填充顏色為透明色，這樣設置是因為中繼器可以設置背景交替的顏色，這樣兩行之間就能行程間隔顏色

輸入框：5個輸入框，作用是修改或者填寫數據，因為最后的橫向合計是自動計算的，不需要輸入，所以只需要5個即可。放置在前5個矩形的中部，同樣設置填充顏色為透明，取消邊框。

如下圖所示擺放：

2.2 中繼器表格

共5列，依次為：

• date：對應日期，在里面填寫具體內容即可
• commodit1~4：商品1到4的數據，也是填寫內容即可

3. 表尾

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

如下圖所示擺放：

4. 按鈕

增加行按鈕一個。

三、交互設置

1. 中繼器載入時交互

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

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

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

這里可能比較難理解，因為中繼器是一行一行加載的，例如，第一行的時候，因為前面做了歸零的操作，相當于是商品一第一行的數據640+0，所以合計1就變成640；第二行加載時，商品1的數值為9974，target.text為前面記錄的640，所以合計1就變成了9974+640=10614……直到最后一行，這樣就把縱向合計數所出來了。合計2、3、4的原理一致。

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

這樣我們在表格里面默認填寫的數據，演示預覽的時候就可以看到自動計算的結果，接下來我們要考慮的是，修改數據的時候，如果自動合計。

2. 數據變化時的交互

其實這個也是很簡單，只要數據發生了改變，我們就通過更新行的操作把中繼器里面對應的數據更新，更新之后，中繼器會重新從第一行加載，所以又實現的上面的合計。

以中繼器第一個輸入框為例，在輸入框失去焦點時（修改結束的標志），我們更新當前行，更新的第一列date列的內容為this.text，就是輸入框里面的內容。

那第2、3、4、5個輸入框也是一樣的，分別對應修改commodit1~4列的內容即可。

3. 添加數據行的交互

當鼠標點擊添加行按鈕時，我們只需要添加一行空的數據，讓用戶填寫即可。我們用添加行事件，對中繼器添加一行空行。

用戶填寫數據后，又會觸發上面文本框失去焦點時的交互，在觸發中繼器每項加載時的交互，最終實現自動計算合計數的效果。

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

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

本文由 @AI產品人 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自pexels，基于CC0協議