在用Axure的時候，怎么通過中繼器實現(xiàn)表單的增刪改查呢？本文分享了一個方法。

使用中繼器設(shè)計表單，如下：

一、分析

1. 在文本框中輸入學(xué)號，姓名，成績，班級，點擊“新增”可新增一行信息流；
2. 點擊左邊“復(fù)選框”，選擇一條需要刪除的數(shù)據(jù)，點擊“刪除”，可刪除已標(biāo)記信息；
3. 點擊左邊“復(fù)選框”，選擇一條需要修改的數(shù)據(jù)，點擊“編輯”，可修改已標(biāo)記信息；
4. 輸入表頭信息，點擊“查詢”，可查詢所需信息；
5. 向左雙箭頭，表示“前一頁”；
6. 向左單箭頭，表示“首頁”；
7. 向右雙箭頭，表示“后一頁”；
8. 向右單箭頭，表示“尾頁”；
9. 雙箭頭中間矩形框，表示“當(dāng)前數(shù)據(jù)行/總數(shù)據(jù)行”；
10. 向右單箭頭的右邊矩形框，表示“共多少條數(shù)據(jù)”。

二、設(shè)計

備注：以下步驟，可先設(shè)置中繼器，再完成其他的操作。

步驟1：添加4個文本框，分別命名為input_ID、input_Name、Input_Grade、Input_Class，Ctrl+G組合命名為Input。

步驟2：添加向左雙箭頭元件、向左單箭頭件、向左雙箭頭右件、向左單箭右件、兩個矩形，如下：

步驟2.1 向左雙箭頭用例：

設(shè)置當(dāng)前頁為“Previous”，代表上一頁。

步驟2.2 向左單箭頭件用例設(shè)置：

設(shè)置當(dāng)前頁的值為1，代表首頁。

步驟2.3 向右雙箭頭用例設(shè)置：

設(shè)置當(dāng)前頁的為NEXT，代表下一頁。

步驟2.4 向右單箭頭用例設(shè)置。

設(shè)置當(dāng)前頁為LAST，代表最后一頁。

步驟2.5 雙箭頭中間矩形框“當(dāng)前數(shù)據(jù)行/總數(shù)據(jù)行”用例設(shè)置。

設(shè)置變量，選擇中繼器、數(shù)據(jù)集中的變量visibleItemCount，代表當(dāng)前頁當(dāng)前頁面中所有可見項的數(shù)量。

itemCount代表當(dāng)前過濾器中的項的個數(shù)。

備注，中繼器函數(shù)說明：

• Item：中繼器的項
• Item.Column0：中繼器數(shù)據(jù)集的列明
• index：中繼器項的索引
• isFirst：中繼器的項是否為第一個
• isLast：中繼器的項是否為最后一個
• isEven：中繼器的項是否為偶數(shù)
• isOdd：中繼器的項是否奇數(shù)
• isMarked：中繼器的項是否被標(biāo)記
• isVisible：中繼器的項是否可見
• repeater：返回當(dāng)前項的父中繼器
• visibleItemCount：當(dāng)前頁面中所有可見項的數(shù)量
• itemCount：當(dāng)前過濾器中的項的個數(shù)
• datacount：中繼器數(shù)據(jù)集中所有項的個數(shù)
• pagecount：中繼器中總共的頁面數(shù)
• pageindex：當(dāng)前的頁數(shù)

步驟2.6 向右單箭頭的右邊矩形框，“共多少條數(shù)據(jù)”用例設(shè)置。

函數(shù)使用：datacount,代表中繼器數(shù)據(jù)集中所有項的個數(shù)。

步驟3：插入“中繼器”元件（以下數(shù)據(jù)后續(xù)會添加，請做參考），命名為“List”。

步驟3.1，雙擊“中繼器”，在List(index)頁面中，復(fù)制5個矩形框，在第一個矩形框中，拖入一個“復(fù)選框”，如下：

中繼器中復(fù)選框用例設(shè)置分析：

當(dāng)選中時，List數(shù)據(jù)集此行顯示為true

當(dāng)取消選擇時，List數(shù)據(jù)集此行顯示為False

備注：取消標(biāo)記具體設(shè)置略。

步驟3.2? 在中繼器中添加數(shù)據(jù)

步驟3.3?在中繼器中設(shè)置用例，用例設(shè)置為“每項載入時”，同時設(shè)置“載入時”每頁顯示項目數(shù)，如下：

步驟4?設(shè)置List表頭，復(fù)制5個矩形，表頭分別為學(xué)號、姓名、成績、班級，以及在第一個矩形框中添加復(fù)選框，命名為全選。

“全選”用例設(shè)置分析：

當(dāng)選擇時，中繼器中的復(fù)選框全部選中；

當(dāng)取消選擇時，中繼器中的復(fù)選框全部取消選中；

備注：取消選擇具體設(shè)置略。

步驟5：添加四個功能按鈕元件，分別命名為新增、刪除、編輯、查詢。

步驟5.1 新增用例設(shè)置

點擊“添加行”在每一個字段下面添加局部變量LVAR1，局部變量取值為input文本框?qū)?yīng)的字段。

步驟5.2 刪除用例設(shè)置

步驟5.3 編輯用例設(shè)置

步驟5.4 查詢用例設(shè)置

函數(shù)使用indexOf函數(shù)：indexOf(‘searchValue’，start) 用途：從左至右獲取查詢字符串在當(dāng)前文本對象中首次出現(xiàn)的位置。未查詢到時返回值為-1。 參數(shù)：searchValue為查詢的字符串；start為查詢的起始位置。

記得F5預(yù)覽哦。

以下為原形下載鏈接，歡迎下載。

鏈接：https://pan.baidu.com/s/1d_k9oWjnKdZhVhYB8SYpqA 密碼：y30d

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

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