在系統表格中，想要快速找到對應的數據，通常會用條件篩選來完成。但篩選的話，其他數據就看不到了，所以一般需要數據對比的情況下更多的是用標記數據的方式，將符合條件的數據標記過來。本文作者分享了如何在Axure中用中繼器制作能夠尋找和標記數據的原型模板，一起來看一下吧。

在系統表格中，我們想在表格中快速找到對應的數據，通常我們會用條件篩選來完成，但是用篩選的方式，其他數據就看不到了，少了兩種條件之間的對比。所以如果需要數據對比的情況下，我們更多的是用標記數據的方式，將符合條件的數據標記起來，從而快速對比條件內外數據的差別。

今天作者就教大家如何在Axure中用中繼器制作能過尋找和標記數據的原型模板，我們會以區間范圍標注的案例展開學習。

一、效果展示

1. 可以按照三種區間進行標注，分別是左側單區間（例如3萬以上），右側單區間（例如6萬以下），雙側雙區間（例如3到6萬），將符合條件的數據用指定顏色標記。
2. 可以多種條件同時標記，例如對存款余額300萬以上的數據進行標記，同時對理財余額600萬以下的數據進行標記。
3. 可以按照各類進行升降序排序。

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

二、制作教程

1. 材料準備

1）輸入框和按鈕

材料包括文本標簽、輸入框、按鈕、矩形等。

文本標簽主要是提示文字和~

輸入框的類型我們選擇number，我們將他設置成透明無邊框，兩個輸入框之間用~文本標簽隔開，用背景矩形包裹組成輸入框組，這樣會更加好看。有幾組條件，就增加幾組輸入框組。

按鈕一個是標注一個是重置。

2）表格表頭

表格表頭，我們用矩形制作，中間需要排序的增加上下箭頭，如下圖所示排版：

這里所有箭頭我們增加一個單選組，增加選中樣式，填充顏色為藍色。

3）中繼器表格

中繼器表格里面我們主要是矩形，每列對應一個矩形，需要和表頭每列矩形的寬度一一對應。矩形我們用透明矩形，這樣我們設置中繼器背景單雙行顏色就不會被遮擋，從而實現斑馬線效果

操作列是是參考報表的文字，我們可以增加鼠標懸停樣式，增加下劃線

需要被標注的列對應的矩形元件，我們要設置選中樣式為紅色文本。

如果需要移入行變色效果的話，我們可以增加透明的背景矩形，將他們包括起來，至于底層，增加選中樣式，填充淺藍色，這里不要懸停樣式，是因為如果勾選觸發內部元件交互樣式的話，就會導致移入該行，上面設置操作文字就會觸發懸停，所以這里我們用選中樣式。將中繼器里所有元件組合在一起，增加鼠標移入選中背景矩形，鼠標移出時取消選中的交互

中繼器表格里我們填寫對應的內容，你們可以根據你們實際需要填寫。

column1~6是填寫表格1到6列對應的內容即可，gengxinlie用于邏輯交互，默認為空即可。

填寫完成后，我們需要將表格的數據設置到對應的矩形里，如果是Axure10的話，直接點擊中繼器里的連接，選擇對應的矩形元件即可。如果是axure8、9的話，就要寫交互來完成，在中繼器每項加載時，我們用設置文本的交互，將中繼器表格里每列的值設置到對應的元件里。

2. 交互制作

1）標注的條件

我們以第二列存款余額為例，我們要分3種情況來討論：

第一種情況是，如果只填寫了最小值，又填寫最大值，那就是雙區間標注，我們就找出第二列里大于對應最小值的輸入框，并且小于對應最大值的輸入框，用設置選中的交互，將他選中，因為前面設置了選中樣式，所以就戶變紅。

第二種情況是，填寫了最小值，沒有填寫最大值，這個相當于最小值的單區間，例如三萬以上，這樣我們只需要找出第二列里大于對應最小值的輸入框，用設置選中的交互，將他選中。

第三種情況是，沒有填寫了最小值，只填寫最大值，這個相當于最答值的單區間，例如六萬以下，這樣我們只需要找出第二列里小于對應最大值的輸入框，用設置選中的交互，將他選中。

這樣就完成了對存款余額按條件標記的交互了，如果有多列多個標注條件，也是用以上同上的方式添加交互。

2）按鈕觸發事件

在上面條件交互寫好之后，我們需要點擊標注按鈕或者重置按鈕，將他們標注或者取消標注。

鼠標單擊標準按鈕時，相當于我們要根據輸入框內容，判斷中繼器里哪些行符合條件，所以，我們用更新行的交互，更新一下中繼器表格數據，相當于重新尋找標記數據。這個我們先標記所有行，然后更新他們的值，更新的內容是什么不重要，最重要是不要和更新前一樣就行了，否則會導致更新失敗，所以我們用簡單的數學，讓他等于他之前的值+1。

那我們怎么重置數據了，其實很多辦法都可以，我們可以用打開鏈接的交互，刷新頁面，這是最直接的，但是這樣體驗不會太好，因為會閃一下，電腦卡的話刷新還要時間

所以我們用設置文本的交互，將所有條件輸入框的值設置為空，相當于恢復原樣，然后在觸發標注按鈕，重新標注即可。

3）中繼器表格的排序

因為前面我們默認設置存款余額的下箭頭為選中，所以在中繼器載入的時候，我們要用添加排序的交互，對存款余額對應列的數據進行降序排列。

鼠標單擊對應按鈕時，我們要先用選中的交互，將當前按鈕設置為選中，然后在用添加排序的交互，對對應列的數據進行排列，如果是上箭頭就用升序，如果是下箭頭就用降序。

對于默認選中的按鈕，案例中是存款余額的下按鈕，我們可以勾選默認選中，也可以在按鈕載入時，觸發該按鈕鼠標單擊時的交互，都可以起到默認選中的效果。

這樣我們就制作完成了中繼器表格尋找和標記數據的原型模板了，下次使用時，只需要在中繼器表格里維護對應的數據，預覽時就會自動生成效果了，是不是很方便呢？

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。