在學(xué)習(xí)了本文的中繼器表格之后，你將會十分完美地解決原生表格組件覆蓋不到的功能區(qū)。一起來看。

表格應(yīng)該是我們非常熟悉的一種數(shù)據(jù)格式了，在實際開發(fā)中，它也是作為系統(tǒng)的一個組件之一在各種場景中頻繁出現(xiàn)。

在我看來，表格設(shè)計在產(chǎn)品原型的中的功能主要有兩個：

1. 數(shù)據(jù)陳列。展示一組（全量）真實數(shù)據(jù)，方便溝通過程中需求雙方對真實業(yè)務(wù)場景的理解。
2. 數(shù)據(jù)模擬。作為產(chǎn)品交互組件的一部分，展示結(jié)構(gòu)及交互樣式，主要是表現(xiàn)系統(tǒng)原型的統(tǒng)一性及協(xié)調(diào)性。

AxuerRP為我們提供的表格組件，可以較為效率地解決“數(shù)據(jù)陳列”問題（兼容一般格式的excel單元格復(fù)制粘貼），以及基本滿足“數(shù)據(jù)模擬”中對表格樣式及交互的要求，但是在大部分系統(tǒng)的細分場景下面，原生表格組件對“數(shù)據(jù)模擬”功能的實現(xiàn)略顯疲軟，如果你只懂的原生組件來做表格，那么你做的表格大概都長這樣：

有問題嗎？是的，樣子雖然簡單了點，但問題不大。

但是，如果你遇到了比如以下這兩個需求呢？

• 需求1：實現(xiàn)一個橫邊框的表格。
• 需求2：鼠標(biāo)懸停表格的某一行，表格整行高亮顏色（或觸發(fā)其他交互）：

我想，除了拿著矩形在那拼半天，或是在excel制作完貼圖，確實也沒什么更好的辦法了…

看完本篇，你將輕松實現(xiàn)以下效果：

回到正題，總的來說，axure8.0原生表格的使用特點是：

樣式/交互的編輯的粒度是單元格，而即使是單元格，樣式設(shè)計也有很大的局限性（比如不支持部分邊框）

我們都知道，表格是一種行列相對固定的數(shù)據(jù)格式，在日常excel編輯中，我們常常都對數(shù)據(jù)中的某一行/列，進行編輯，再應(yīng)用到全局表格中，而在系統(tǒng)原型的使用場景中，我們也常常依賴于對行的樣式控制，那么在原生表格覆蓋不到的場景之下，我們應(yīng)該怎樣實現(xiàn)這些需求呢？

本節(jié)介紹的中繼器表格，將會十分完美地解決原生表格組件覆蓋不到的功能區(qū)。

本節(jié)目錄

1. 基礎(chǔ)中繼器表格
2. 表格的行級別交互
3. 表格的數(shù)據(jù)分頁
4. 表格的數(shù)據(jù)搜索
5. 表格的增刪改

1.基礎(chǔ)中繼器表格

在上一節(jié)的介紹中，我們把“中繼器”比喻成“模版”，通過對模版的修改，達到行級別的樣式重復(fù)，通過對數(shù)據(jù)的標(biāo)準(zhǔn)化填充，實現(xiàn)組件數(shù)據(jù)的批量修改。

其實，中繼器的數(shù)據(jù)結(jié)構(gòu)本身已經(jīng)是一個表格了，而用中繼器來重寫原生表格，只不過為中繼器設(shè)計一件好看的衣服而已。

我們知道，中繼器的迭代單位是“行”，而看表格的結(jié)構(gòu)，也是縱橫交錯的行列構(gòu)成，而每一行里面有若干個單元格。下面我們來看一個最基礎(chǔ)的中繼器表格是怎么實現(xiàn)的。

首先我們在axure里面創(chuàng)建一個中繼器，雙擊中繼器，用以下四個矩形替代默認的矩形。

再回到頁面，我們將看到以下效果：

一個4列N行的表格結(jié)構(gòu)已經(jīng)搭建完成，我們只需要將“中繼器每項加載時”的交互設(shè)置“矩形內(nèi)容=中繼器數(shù)據(jù)”，并在中繼器填充數(shù)據(jù)，就可以完成表格數(shù)據(jù)的編輯。

回到頁面，我們可以看到數(shù)據(jù)已經(jīng)更新了：

這就是中繼器改寫的基礎(chǔ)表格，下面，我們來看這樣子的基礎(chǔ)表格的各種玩法。

2.表格的行級別交互

a.橫邊框表格

這個大家應(yīng)該一眼就看明白（雖然原生表格摔破頭也無法實現(xiàn)的），僅需要在中繼器內(nèi)的單元格增加下邊框就行了，需要注意的一點是，中繼器式表格的表頭需要單獨制作，建議大家處理完中繼器內(nèi)的樣式之后，copy一份出來單獨編輯即可。

b.條紋表格

條紋表格，原理上是通過奇偶數(shù)行樣式的控制來實現(xiàn)區(qū)隔色效果，在中繼器中，剛好有“isEven”（是否偶數(shù)行）“isOdd”（是否奇數(shù)行）來幫我們進行判斷，而我們只需要在中繼器“每項加載時”加入條件，進行分別設(shè)置即可。

c.懸停高亮

這個就留給大家思考啦，相信懂了a跟b之后，這樣的樣式已經(jīng)沒什么難度，需要留意的是，如果不增加bg層，而直接對單元格進行編組設(shè)置的同學(xué)，務(wù)必要對分組勾選“允許觸發(fā)鼠標(biāo)交互”復(fù)選框，否則鼠標(biāo)懸停行之后就只能觸發(fā)單元格的樣式改變咯（當(dāng)然這也有合適的使用場景）

3.表格的數(shù)據(jù)分頁

上一節(jié)中我們在日期控件的制作過程中已經(jīng)介紹了中繼器對數(shù)據(jù)的縱橫排列。

除了排列之外，中繼器還支持數(shù)據(jù)分頁，包括上下翻頁、頁碼跳頁等等，這功能就強大了，能完全模擬我們系統(tǒng)中的翻頁，并且能有效兼容數(shù)據(jù)溢出。我們先看看demo。

分頁的實現(xiàn)分數(shù)據(jù)分頁及分頁控制兩部分，數(shù)據(jù)分頁我們僅須勾選中繼器樣式里面的分頁設(shè)置，并配置頁數(shù)和起始頁就可以了。

頁面控制部分，涉及到兩個觸發(fā)效果，“當(dāng)前頁面”和“每頁頁數(shù)”。當(dāng)前頁面的配置包括“上一頁”“下一頁”“頁數(shù)跳轉(zhuǎn)”，axure提供的添加動作里已經(jīng)囊括。

每頁頁數(shù)也是axure提供的交互動作之一，配置也是比較簡單，我們只要配置點擊選項觸發(fā)就ok了。

中繼器分頁功能絕不僅限于表格應(yīng)用，像我們上一期做的日期控件基本版，其實也可以通過分頁來實現(xiàn)全年版，數(shù)年版等等，大家感興趣的話可以去嘗試以下。

4.表格的數(shù)據(jù)搜索

什么是數(shù)據(jù)篩選？我的理解是數(shù)據(jù)的搜索條件，我們在表單使用過程中常常使用下拉框、文本框等控件進行搜索，而中繼器的數(shù)據(jù)篩選功能，可以完美地迎合我們的搜索需求，當(dāng)然僅限于“精準(zhǔn)匹配”（模糊匹配不支持），至于排序，就是按字段索引條件對記錄進行順序變更，我們來看看demo。

Demo中涉及的交互動作有“中繼器-添加排序”“中繼器-移除排序”“中繼器-添加篩選”“中繼器-移除篩選”，我們下面演示添加排序及添加篩選，其他兩個類比可實現(xiàn)。

5.表格的增刪改

我們知道，中繼器數(shù)據(jù)的來源是我們在中繼器“屬性”tab中看到的這張表格，所謂的增刪改，就是通過axure提供的動作，來增加、修改、刪除這張表里面的內(nèi)容。

這里主要講解添加行，刪除行、更新行由于涉及到“標(biāo)記”與條件，我們放到下一節(jié)的綜合案例中來具體鋪陳。

其實中繼器的數(shù)據(jù)的“添加”功能，大部分的應(yīng)用場景是我們對中繼器記錄的簡單“復(fù)制”，并且這種復(fù)制大多數(shù)情況下是跟數(shù)據(jù)沒有關(guān)系的，比如下面這個demo。

這個例子中，點擊添加，我們僅須觸發(fā)一個新的記錄空行而已，動作的配置也非常簡單。

在添加行的配置中，我們只是設(shè)置了一個1，因為我們僅需實現(xiàn)元件的復(fù)制，如果想要通過其他字段的信息來添加新行，那么就需要用到變量來進行中轉(zhuǎn)保存了，大家來看下面這個元件，它就是“增加”“刪除”“標(biāo)記”“取消標(biāo)記”“變量”功能的綜合應(yīng)用，我們將在下節(jié)內(nèi)容中繼續(xù)講解！

本節(jié)相關(guān)demo源碼已經(jīng)更新百度網(wǎng)盤，有需要的同學(xué)可以下載查看~

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

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