中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、材料準備

1. 按鈕組

我們需要3個按鈕組，分別為插入行、復制行和刪除行，每個組由圖標+文字組成，如下圖所示：

2. 表格表頭

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

3. 表格內容

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

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

最后我們增加一個透明顏色的背景矩形，包住整行，設置選中樣式為淺藍色，設置單選組，這樣選中哪一條就會有一個高亮的效果了。

中繼器表格里我們新增多列，分別為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. 中繼器內組合的交互

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

3. 背景矩形的交互

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

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文本的行，讓他們的序號變成原來序號的值減一。

例如我刪了第四行，那原來的第五行就變成第四行，第六行就變成第五行，所以這里就是更新序號。

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

那以上就是中繼器表格插入行、復制行和刪除行的全部內容了，感謝您的閱讀，我們下期見~~~