表格是展示資料常用的工具，在原型設計時，我們經常需要用到插入行和複製行的操作。本文作者分享瞭如何在Axure裡用中繼器表格實現插入行、複製行、刪除行等效果，一起來學習一下吧。
表格是展示資料常用的工具，在原型製作時，我們經常會用到插入行和複製行的操作。那作者今天就教大家如何在Axure裡用中繼器表格製作出以下高保真的互動效果：
插入行：在已選中行的下方插入一行空行
複製行：在已選中行的下方插入一行與已選中行相同內容的行
編輯行：可以編輯表格裡的資料
刪除行：刪除已選中的行
自動編號：左側序號根據當前行自動編號
原型地址：https：//olzv8p。axshare。com/#g=1
一、材料準備
1. 按鈕組
我們需要3個按鈕組，分別為插入行、複製行和刪除行，每個組由圖示+文字組成，如下圖所示：
2. 表格表頭
表頭我們用矩形來製作，案例中分依次為序號、姓名、語文、數學、英語……生物、歷史，調整好尺寸和樣式，如下圖所示擺放：
3. 表格內容
表格內容我們用中繼器來製作，中繼器內部元件和表頭一致，調整填充顏色，第一個序號的格子和表頭一樣用灰色，其他格子填充顏色為透明，增加一個禁用樣式，線段為藍色，後續輸入時增加互動就可以有一個高亮的效果。然後可以設定中繼器交替的背景色，這樣單雙行就有不同的顏色。
在每個白色矩形的上方放入一個文字框，填充顏色設定為透明，這樣後續就可以在裡面修改資料了。
最後我們增加一個透明顏色的背景矩形，包住整行，設定選中樣式為淺藍色，設定單選組，這樣選中哪一條就會有一個高亮的效果了。
中繼器表格裡我們新增多列，分別為no和Column1-10。no對應表格的序號，Column1-10分別對應姓名、語文……歷史10列的內容。
4. 記錄文字
因為涉及到複製行，所以我們需要記錄選中行表格的內容，所以我們新建多個文字標籤，預設隱藏，不用於顯示，只用於邏輯互動。分別為記錄no，對應序號no列的內容；記錄1-10，分別應用於記錄姓名、語文……歷史10列（Column1-10）對應的內容。
因為我們進入頁面時預設選中第一行，所以記錄no的文字預設為1。
二、交互制作
1. 中繼器的互動
中繼器每項載入時，我們用設定文字的互動，將表格中的值設定到對應的元件上，no列的值設定到灰色的矩形，Column1-10的值設定到對應的文字框內。
如果no列的值等於記錄no文本里的值，我們還要把該行Column1-10的值分別設定到記錄1-10的文字標籤內。
中繼器載入時，我們用排序事件，將中繼器按no列升序排列，這樣插入行的時候，我們透過控制插入行的no值，就可以控制在哪裡插入了。
2. 中繼器內組合的互動
中繼器內部元件組滑鼠單擊時我們用選中的互動，將背景矩形的選中狀態設定為真，這樣就實現了點選哪行，哪行變色的效果。
3. 背景矩形的互動
背景矩形被選中時，我們用設定文字的互動，將當前行no列的值設定到記錄no的文本里，後續就可以根據這個序號來插入、複製或者刪除行。
4. 輸入框的互動
輸入框獲取焦點時，我們用禁用的互動，將輸入框底部的矩形禁用，因為前面設定了禁用樣式，所以就會有一個高亮的效果。然後我們同樣設定背景矩形為真這樣背景矩形也有一個高亮效果。
輸入框失去焦點時，我們就反向操作，啟用底部矩形。
最後我們還要用更新行的互動更新當前行對應的Column列的值為當前的文字值，1-10的文字框分別對應Column1-10。
5. 插入行的互動
滑鼠單擊插入行按鈕組時，我們要知道在第幾行插入，記錄no裡面就記錄了第幾行被選中，例如選中的是第三行，那我插入的應該是第4行，那原來的第四行就應該變成第5行一次類推。
所以我們要先用更新行的操作，將中繼器no列的值大於記錄no的文字值的所有行，都在原來的基礎上增加1。這裡相當於，如果選中第三行，那456……就變成了567……
這是空no值為4的行了，這是我們用新增行的互動，設定新增的行no列的值為記錄no的文字值+1。
這樣就完成新增新的行了。
6. 複製行的互動
滑鼠單擊複製行按鈕組時，其實前面的都和插入行基本一樣都是先更新已選中行下面序號的行，讓他們序號+1，然後再插入一行新行，序號為記錄no的文字值+1。不同的是上面插入的是空行，這裡插入的是用內容的行，所以在新增行的時候，Column1-10列我們要分別插入記錄no1-10的內容。
7. 刪除行的互動
滑鼠單擊刪除行按鈕組時，我們用刪除行的互動刪除序號和記錄no一樣的行。
然後更新行的互動，更新序號大於記錄no文字的行，讓他們的序號變成原來序號的值減一。
例如我刪了第四行，那原來的第五行就變成第四行，第六行就變成第五行，所以這裡就是更新序號。
這樣我們就完成了中繼器表格插入行、複製行和刪除行原型模板的製作了，下次使用時，只需要在中繼器表格中填寫或貼上對應的資訊，即可自動生成互動效果，是不是很方便呢？
那以上就是中繼器表格插入行、複製行和刪除行的全部內容了，感謝您的閱讀，我們下期見~~~
本文由 @Axure高保真原型 原創釋出於人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基於 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。
