表格是展示數(shù)據(jù)常用的工具，在原型設(shè)計(jì)時(shí)，我們經(jīng)常需要用到插入行和復(fù)制行的操作。本文作者分享了如何在Axure里用中繼器表格實(shí)現(xiàn)插入行、復(fù)制行、刪除行等效果，一起來(lái)學(xué)習(xí)一下吧。

表格是展示數(shù)據(jù)常用的工具，在原型制作時(shí)，我們經(jīng)常會(huì)用到插入行和復(fù)制行的操作。那作者今天就教大家如何在Axure里用中繼器表格制作出以下高保真的交互效果：

1. 插入行：在已選中行的下方插入一行空行
2. 復(fù)制行：在已選中行的下方插入一行與已選中行相同內(nèi)容的行
3. 編輯行：可以編輯表格里的數(shù)據(jù)
4. 刪除行：刪除已選中的行
5. 自動(dòng)編號(hào)：左側(cè)序號(hào)根據(jù)當(dāng)前行自動(dòng)編號(hào)

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

一、材料準(zhǔn)備

1. 按鈕組

我們需要3個(gè)按鈕組，分別為插入行、復(fù)制行和刪除行，每個(gè)組由圖標(biāo)+文字組成，如下圖所示：

2. 表格表頭

表頭我們用矩形來(lái)制作，案例中分依次為序號(hào)、姓名、語(yǔ)文、數(shù)學(xué)、英語(yǔ)……生物、歷史，調(diào)整好尺寸和樣式，如下圖所示擺放：

3. 表格內(nèi)容

表格內(nèi)容我們用中繼器來(lái)制作，中繼器內(nèi)部元件和表頭一致，調(diào)整填充顏色，第一個(gè)序號(hào)的格子和表頭一樣用灰色，其他格子填充顏色為透明，增加一個(gè)禁用樣式，線段為藍(lán)色，后續(xù)輸入時(shí)增加交互就可以有一個(gè)高亮的效果。然后可以設(shè)置中繼器交替的背景色，這樣單雙行就有不同的顏色。

在每個(gè)白色矩形的上方放入一個(gè)文本框，填充顏色設(shè)置為透明，這樣后續(xù)就可以在里面修改數(shù)據(jù)了。

最后我們?cè)黾右粋€(gè)透明顏色的背景矩形，包住整行，設(shè)置選中樣式為淺藍(lán)色，設(shè)置單選組，這樣選中哪一條就會(huì)有一個(gè)高亮的效果了。

中繼器表格里我們新增多列，分別為no和Column1-10。no對(duì)應(yīng)表格的序號(hào)，Column1-10分別對(duì)應(yīng)姓名、語(yǔ)文……歷史10列的內(nèi)容。

4. 記錄文本

因?yàn)樯婕暗綇?fù)制行，所以我們需要記錄選中行表格的內(nèi)容，所以我們新建多個(gè)文本標(biāo)簽，默認(rèn)隱藏，不用于顯示，只用于邏輯交互。分別為記錄no，對(duì)應(yīng)序號(hào)no列的內(nèi)容；記錄1-10，分別應(yīng)用于記錄姓名、語(yǔ)文……歷史10列（Column1-10）對(duì)應(yīng)的內(nèi)容。

因?yàn)槲覀冞M(jìn)入頁(yè)面時(shí)默認(rèn)選中第一行，所以記錄no的文本默認(rèn)為1。

二、交互制作

1. 中繼器的交互

中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將表格中的值設(shè)置到對(duì)應(yīng)的元件上，no列的值設(shè)置到灰色的矩形，Column1-10的值設(shè)置到對(duì)應(yīng)的文本框內(nèi)。

如果no列的值等于記錄no文本里的值，我們還要把該行Column1-10的值分別設(shè)置到記錄1-10的文本標(biāo)簽內(nèi)。

中繼器載入時(shí)，我們用排序事件，將中繼器按no列升序排列，這樣插入行的時(shí)候，我們通過(guò)控制插入行的no值，就可以控制在哪里插入了。

2. 中繼器內(nèi)組合的交互

中繼器內(nèi)部元件組鼠標(biāo)單擊時(shí)我們用選中的交互，將背景矩形的選中狀態(tài)設(shè)置為真，這樣就實(shí)現(xiàn)了點(diǎn)擊哪行，哪行變色的效果。

3. 背景矩形的交互

背景矩形被選中時(shí)，我們用設(shè)置文本的交互，將當(dāng)前行no列的值設(shè)置到記錄no的文本里，后續(xù)就可以根據(jù)這個(gè)序號(hào)來(lái)插入、復(fù)制或者刪除行。

4. 輸入框的交互

輸入框獲取焦點(diǎn)時(shí)，我們用禁用的交互，將輸入框底部的矩形禁用，因?yàn)榍懊嬖O(shè)置了禁用樣式，所以就會(huì)有一個(gè)高亮的效果。然后我們同樣設(shè)置背景矩形為真這樣背景矩形也有一個(gè)高亮效果。

輸入框失去焦點(diǎn)時(shí)，我們就反向操作，啟用底部矩形。

最后我們還要用更新行的交互更新當(dāng)前行對(duì)應(yīng)的Column列的值為當(dāng)前的文本值，1-10的文本框分別對(duì)應(yīng)Column1-10。

5. 插入行的交互

鼠標(biāo)單擊插入行按鈕組時(shí)，我們要知道在第幾行插入，記錄no里面就記錄了第幾行被選中，例如選中的是第三行，那我插入的應(yīng)該是第4行，那原來(lái)的第四行就應(yīng)該變成第5行一次類(lèi)推。

所以我們要先用更新行的操作，將中繼器no列的值大于記錄no的文本值的所有行，都在原來(lái)的基礎(chǔ)上增加1。這里相當(dāng)于，如果選中第三行，那456……就變成了567……

這是空no值為4的行了，這是我們用添加行的交互，設(shè)置添加的行no列的值為記錄no的文本值+1。

這樣就完成添加新的行了。

6. 復(fù)制行的交互

鼠標(biāo)單擊復(fù)制行按鈕組時(shí)，其實(shí)前面的都和插入行基本一樣都是先更新已選中行下面序號(hào)的行，讓他們序號(hào)+1，然后再插入一行新行，序號(hào)為記錄no的文本值+1。不同的是上面插入的是空行，這里插入的是用內(nèi)容的行，所以在添加行的時(shí)候，Column1-10列我們要分別插入記錄no1-10的內(nèi)容。

7. 刪除行的交互

鼠標(biāo)單擊刪除行按鈕組時(shí)，我們用刪除行的交互刪除序號(hào)和記錄no一樣的行。

然后更新行的交互，更新序號(hào)大于記錄no文本的行，讓他們的序號(hào)變成原來(lái)序號(hào)的值減一。

例如我刪了第四行，那原來(lái)的第五行就變成第四行，第六行就變成第五行，所以這里就是更新序號(hào)。

這樣我們就完成了中繼器表格插入行、復(fù)制行和刪除行原型模板的制作了，下次使用時(shí)，只需要在中繼器表格中填寫(xiě)或粘貼對(duì)應(yīng)的信息，即可自動(dòng)生成交互效果，是不是很方便呢？

那以上就是中繼器表格插入行、復(fù)制行和刪除行的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見(jiàn)~~~