Axure:中繼器實現表單增刪改查
在用Axure的時候,怎么通過中繼器實現表單的增刪改查呢?本文分享了一個方法。
使用中繼器設計表單,如下:
一、分析
- 在文本框中輸入學號,姓名,成績,班級,點擊“新增”可新增一行信息流;
- 點擊左邊“復選框”,選擇一條需要刪除的數據,點擊“刪除”,可刪除已標記信息;
- 點擊左邊“復選框”,選擇一條需要修改的數據,點擊“編輯”,可修改已標記信息;
- 輸入表頭信息,點擊“查詢”,可查詢所需信息;
- 向左雙箭頭,表示“前一頁”;
- 向左單箭頭,表示“首頁”;
- 向右雙箭頭,表示“后一頁”;
- 向右單箭頭,表示“尾頁”;
- 雙箭頭中間矩形框,表示“當前數據行/總數據行”;
- 向右單箭頭的右邊矩形框,表示“共多少條數據”。
二、設計
備注:以下步驟,可先設置中繼器,再完成其他的操作。
步驟1:添加4個文本框,分別命名為input_ID、input_Name、Input_Grade、Input_Class,Ctrl+G組合命名為Input。
步驟2:添加向左雙箭頭元件、向左單箭頭件、向左雙箭頭右件、向左單箭右件、兩個矩形,如下:
步驟2.1 向左雙箭頭用例:
設置當前頁為“Previous”,代表上一頁。
步驟2.2 向左單箭頭件用例設置:
設置當前頁的值為1,代表首頁。
步驟2.3 向右雙箭頭用例設置:
設置當前頁的為NEXT,代表下一頁。
步驟2.4 向右單箭頭用例設置。
設置當前頁為LAST,代表最后一頁。
步驟2.5 雙箭頭中間矩形框“當前數據行/總數據行”用例設置。
設置變量,選擇中繼器、數據集中的變量visibleItemCount,代表當前頁當前頁面中所有可見項的數量。
itemCount代表當前過濾器中的項的個數。
備注,中繼器函數說明:
- Item:中繼器的項
- Item.Column0:中繼器數據集的列明
- index:中繼器項的索引
- isFirst:中繼器的項是否為第一個
- isLast:中繼器的項是否為最后一個
- isEven:中繼器的項是否為偶數
- isOdd:中繼器的項是否奇數
- isMarked:中繼器的項是否被標記
- isVisible:中繼器的項是否可見
- repeater:返回當前項的父中繼器
- visibleItemCount:當前頁面中所有可見項的數量
- itemCount:當前過濾器中的項的個數
- datacount:中繼器數據集中所有項的個數
- pagecount:中繼器中總共的頁面數
- pageindex:當前的頁數
步驟2.6 向右單箭頭的右邊矩形框,“共多少條數據”用例設置。
函數使用:datacount,代表中繼器數據集中所有項的個數。
步驟3:插入“中繼器”元件(以下數據后續會添加,請做參考),命名為“List”。
步驟3.1,雙擊“中繼器”,在List(index)頁面中,復制5個矩形框,在第一個矩形框中,拖入一個“復選框”,如下:
中繼器中復選框用例設置分析:
當選中時,List數據集此行顯示為true
當取消選擇時,List數據集此行顯示為False
備注:取消標記具體設置略。
步驟3.2? 在中繼器中添加數據
步驟3.3?在中繼器中設置用例,用例設置為“每項載入時”,同時設置“載入時”每頁顯示項目數,如下:
步驟4?設置List表頭,復制5個矩形,表頭分別為學號、姓名、成績、班級,以及在第一個矩形框中添加復選框,命名為全選。
“全選”用例設置分析:
當選擇時,中繼器中的復選框全部選中;
當取消選擇時,中繼器中的復選框全部取消選中;
備注:取消選擇具體設置略。
步驟5:添加四個功能按鈕元件,分別命名為新增、刪除、編輯、查詢。
步驟5.1 新增用例設置
點擊“添加行”在每一個字段下面添加局部變量LVAR1,局部變量取值為input文本框對應的字段。
步驟5.2 刪除用例設置
步驟5.3 編輯用例設置
步驟5.4 查詢用例設置
函數使用indexOf函數:indexOf(‘searchValue’,start) 用途:從左至右獲取查詢字符串在當前文本對象中首次出現的位置。未查詢到時返回值為-1。 參數:searchValue為查詢的字符串;start為查詢的起始位置。
記得F5預覽哦。
以下為原形下載鏈接,歡迎下載。
鏈接:https://pan.baidu.com/s/1d_k9oWjnKdZhVhYB8SYpqA 密碼:y30d
本文由 @小甜甜不甜 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Pexels ,基于 CC0 協議
- 目前還沒評論,等你發揮!