Axure教程——表格插入行、複製行和刪除行

語言: CN / TW / HK

表格是展示數據常用的工具,在原型設計時,我們經常需要用到插入行和複製行的操作。本文作者分享瞭如何在Axure裏用中繼器表格實現插入行、複製行、刪除行等效果,一起來學習一下吧。

表格是展示數據常用的工具,在原型製作時,我們經常會用到插入行和複製行的操作。那作者今天就教大家如何在Axure裏用中繼器表格製作出以下高保真的交互效果:

  1. 插入行:在已選中行的下方插入一行空行
  2. 複製行:在已選中行的下方插入一行與已選中行相同內容的行
  3. 編輯行:可以編輯表格裏的數據
  4. 刪除行:刪除已選中的行
  5. 自動編號:左側序號根據當前行自動編號

原型地址: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 協議。

該文觀點僅代表作者本人,人人都是產品經理平台僅提供信息存儲空間服務。

給作者打賞,鼓勵TA抓緊創作!