Axure RP8 中繼器:欄位增刪改

2021-01-10 人人都是產品經理

文章分享了關於利用Axure RP8中繼器實現表單的增刪改的具體操作過程,一起來學習下。

原型演示:

使用場景:適用於模塊內增加擴展同名稱欄位

交互需求:

欄位可以輸入並記錄內容(欄位輸入長度不超過20字);單擊添加,增加一個欄位;單擊欄位後面的×,刪除對應欄位;增刪欄位,項目序號自動增減;

01 準備工作

矩形元件一個,中繼器一個。

剛從Default元件庫拖出中繼器內默認有一些默認的元件和設置,我們需要對中繼器做一些處理,點擊中繼器,右側它的屬性頁,刪除第一、二行,保留第三行(為什麼保留第三行呢,因為需要頁面載入時有一個初始的欄位)。

然後雙擊中繼器進入中繼器編輯頁面,把矩形框刪掉,在中繼器內放入我們需要的元件,做好元件命名。

最後返回原頁面,準備製作交互了。

02 製作交互

2.1 中繼器加載數據集到元件

點擊中繼器,中繼器屬性面板選擇每項載入時,當打開網頁或者添加數據時候,為中繼器加載數據集到元件。

為了實現編號自增,項目編號的動作設置為[[item.index]],[[item.index]]需要手動輸入,而內容輸入框的動作可直接進入函數選框選擇[[item.EditText]](EditText在元件準備時已經命名好了,有疑問的同學們可以翻翻上面圖片)。

2.2 內容輸入框設置

剛剛在準備基礎元件的時候已經拖出了文本框,此時為了更直觀地向用戶表達欄位可輸入我們需要設置一個提示語和設置元件最大輸入文字數為20,如下圖。

2.3 添加行

在元件準備的時候,我們已經準備了一個添加按鈕,也在中繼器屬性面板為中繼器數據集添加命名了EditText列,現在我們就要為添加按鈕配置點擊動作,為中繼器「添加行」。

新增行-選中中繼器-點擊新增行-選中中繼器數據集-點擊新增行-點擊確定。

2.4 刪除行

單擊欄位後面的×,刪除對應欄位,我們這個案例不需要用到標記行這個功能,直接為刪除按鈕配置點擊動作就可以了。

到了這一步我們以為已經基本完成了,預覽一下,咦,我們發現,每次添加行或者刪除行,都會清空我們已輸入的內容,這個怎麼呢?為了讓中繼器的數據集記錄下我們已輸入的內容,我們還需要做「更新行」的操作。

2.5 更新行

欄位編輯後需要記錄編輯內容就是需將用戶輸入內容記錄到中繼器中,此時我們只需要把用戶輸入的內容獲取到並通過某個交互動作傳給「EditText」列就可以了。下面我用到的是「失去焦點時」這個交互,選擇的動作是「更新行」。

到這裡就真的完成了,大家可以預覽一下!

回顧:

(1)增刪行,序號是如何實現自增的呢?

回答:項目編號的動作設置為[[item.index]]。

(2)增刪行後,清空已輸入內容怎麼辦?

回答:需要更新行。

本文由 @茗一 原創發布於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

相關焦點

  • Axure高階教程:利用JavaScript製作實時天氣顯示APP
    原理這個實例中主要用到了Axure的以下幾個功能:(1)中繼器由於『昨天』、『今天』、『明天』的天氣概要布局相同,可以使用中繼器更加規範顯示。javascript:$.ajax({method: 『GET』,url: 『http://t.weather.sojson.com/api/weather/city/101010100』,data: {}}).done(function(msg){$axure.setGlobalVariable
  • 產品人必會的Axure RP 9 實踐技能
    中繼器類似於一個微型的資料庫,頁面中只要有可以重複展示的元素(數據不同),就可以使用中繼器,還可以做到對數據條目進行增刪改查、排序等常用功能,下面用案例來介紹一下中繼器的常用功能。其次,在樣式中配置中繼器表格名稱,使用英文與中繼器配置頁面中的文字或圖片保持一致,修改完名稱後添加幾條數據進去,如下圖所示:再次,在中繼器加載時,需要關聯數據展示,所以需要配置頁面文字或圖片與數據之間的關聯關係,在中繼器加載時設置文本、設置圖片即可,如下圖所示:4.2 內容排序中繼器內容項排序,效果如下圖所示,案例中通過「價格升序」,「銷量降序
  • Axure高級教程:如何從外部獲取Axure中繼器裡的數據
    我們知道中繼器在Axure中實現數據動態展現的作用不言而喻,Axure提供了中繼器內部的數據交換接口,但是沒有提供明顯的從外部獲取中繼器內部數據的方法。當你需要從外部獲取中繼器裡的數據的時候就尷尬了,你將無法直接通過自帶的函數獲取到相應數據。所以接下來我們看看如何從外部去獲取中繼器裡的數據。
  • 【視頻教學】遊戲策劃視頻教學第三講:Axure如何設計UI
    Axure如何設計遊戲UI  為了許多不方便看視頻的同學,做了一個基礎圖文版的教學,希望能夠幫助到大家。Ax  axure元件:也叫axure組件或axure部件,系統自帶了一部分最基礎常用的,網上也有很多別人做好的,軟體使用到一定階段可以考慮自己製作元件,以便提高產品原型的製作速度。  生成原型:是指把繪製好的原型通過axure rp生成靜態的html頁面,檢查原型是否正確,同時,方便演示。
  • 基礎SQL-DML語句-對資料庫表數據增刪改
    基礎SQL-DML語句-對資料庫表數據增刪改分類描述關鍵字DML(Data Manipulation Language)數據操作語言用來對資料庫中表的數據進行增刪改insert,delete, update等1.
  • Axure教程:用中繼器和日期函數實現萬年曆
    學習重點通過本案例,我們主要來練習中繼器和日期函數的使用,中繼器用於顯示日曆的天,日期函數則用於處理日曆的顯示邏輯。其中使用到的日期函數將包括:Now-獲取當前日期、getDate()-獲取天、getDay()-獲取一周中的第幾天、addDays()-增加/減少天、addMonths()-增加/減少月、addYears()-增加/減少年。
  • Axure教程:中繼器基礎應用——數據展示、新增、刪除
    中繼器——Axure中複雜的元件,沒有之一。中繼器是Axure中最強大的元件,通常用於頁面效果展示時使用。但對於新手小白來說,這個元件的使用不是那麼的友好,學習成本較高……在本文中,將對中繼器的基礎和簡單的使用包括數據展示、新增、刪除功能的實現進行詳細講解,希望能幫助你更好的理解中繼器~
  • Axure教程:可增刪改的樹型結構
    二、使用方法在中繼器中編輯:no:第n個一級內容就寫a00000000,例如第一個一級內容:100000000;第a個一級內容下的第b個二級內容就寫a0b000000(n>9時,mn000000);以此類推。
  • Axure教程:原型設計之轉盤抽獎
    這一章就教大家如何使用axure原型工具製作轉盤抽獎原型。效果圖:axure原型設計之轉盤抽獎附件下載:轉盤抽獎rp文件作者:維度,個人博客:http://weidublog.com本文由 @維度 原創發布於人人都是產品經理。未經許可,禁止轉載。
  • 用Axure做一個產品需求文檔(PRD)模板
    今天給教大家用axure做一個產品需求文檔(PRD)模板,其中包括目錄,版本修訂記錄,產品概述,功能說明,全局說明,非功能性說明。該原型模板使用簡單,交互完善,直接修改文字即可。喜歡該原型的小夥伴們可以在評論處給我留言哦。
  • 《Axure RP 9實用教程:原型+高保真+交互+設計》
    1.3.5頁面與大綱面板131.3.6元件庫與母版面板141.3.7樣式/交互/注釋面板161.4元件說明(一)181.4.1元件概述181.4.2形狀元件181.4.3圖片元件221.4.4水平線和垂直線251.4.5圖像熱區261.5元件說明(二)271.5.1動態面板271.5.2內部框架291.5.3中繼器
  • Axure實現石頭剪刀布小遊戲
    初始圖片calculating:隨機動效result:隨機後匹配選擇的結果展示b1:點擊石頭顯示的圖片b2:點擊剪刀顯示的圖片b3:點擊布顯示的圖片動態面板狀態改變的交互說明:return-result位於結果展示狀態下接收隨機的結果,sys-radom文本框值接收隨機數字對應的圖標,為添加到歷史頁面的中繼器裡做準備
  • Axure交流分享:根據在表格中自定義的數據生成統計柱狀圖
    因為經常會涉及到統計圖、表格這些東西,一般沒有時間做高保真的情況下,會直接用axure拉幾個框或者貼張圖片簡單製作一個。為了不再被開發哥哥噴,這次就用工作之餘做了一個復用性還算高的統計圖以及數據表格原型。作為一個經常潛水的產品小白,第一次發文章,如有不足之處,還望指正。生成不同的柱狀圖
  • 玩轉Axure並不難,這5次實操練習,讓你快速做出標準原型
    你將逐步掌握:Axure的基礎操作,進階的函數、中繼器等功能,實際的產品交互案例,還有產品原型思維。添加交互效果,逐步實現高保真的產品頁面,並驗證產品流程;第4次作業實操:對頁面進行注釋,進行交互說明,輔助於理解頁面邏輯;第5次作業實操:完善整個產品的頁面與交互效果,完成整個產品完整的高保真效果當你在老師的指導下,完成這5次作業實操後,0基礎的你,將從一個axure
  • 中繼器選購技巧
    本文為大家分享的就是無線中繼器的選購技巧以及購買誤區和使用注意事項等。質量更有保障;5、配有信號強度燈的產品更能直觀了解設備工作狀態;6、可攜式USB信號放大器更適用於戶外等需要移動的場所;7、WiFi信號放大器最好有良好的散熱設計,這樣穩定性和使用壽命都更佳;8、
  • 維懂百科——診斷中繼器
    一般情況下,中繼器兩端連接的是相同的媒體,但有的中繼器也可以完成不同媒體的轉接工作。從理論上講,中繼器的使用是無限的,網絡也因此可以無限延長。事實上這是不可能的,因為網絡標準中都對信號的延遲範圍作了具體的規定,中繼器只能在此規定範圍內進行有效的工作,否則會引起網絡故障。乙太網絡標準中約定了一個乙太網上只允許出現5個網段,最多使用4個中繼器,而且其中只有3個網段可以掛接計算機終端。
  • 中繼器系列(二):信息修改
    一、前期準備電腦:mac和win都可以(案例以win系統為例,mac類似)軟體:Axure 8.0熟練程度:中級(元件使用,函數調用)相關使用元件:矩形、按鈕、中繼器、文本框,多行文本框、下拉列表框。三、正文(製作過程)思路:首先找到中繼器中對應的行,在點擊編輯是獲取數據於彈框之上,在彈框上修改之後,數據變動錄入中繼器表格中。
  • 為何從Axure Pro 9換回Axure RP 8
    我經常使用Axure8.0製作原型界面,最近,由於電腦換了一臺,裡面的軟體都需要重新下載,鬼使神差的 圖新鮮,下載了一個Axure RP Pro9,就是下圖這個軟體,Axure RP Pro v9所幸的是與我經常使用的Axure RP 8沒有太大區別,頁面布局也比較相似,上手比較快,於是繼續使用中,界面布局如下圖在使用過程中,我想把一個基礎元件的樣式由圓形改為矩形
  • Axure組件計劃:總結Axure設計組件附源文件
    注意部分中繼器性能可能會較慢)使用時注意:因為限於本人並不想過多的去講解,組件庫中的每一個組件的具體的功能,和如何使用;同時在某些組件中設計的規則比較繁複,故而對於使用者對Axure的熟練度有較高的要求。
  • Axure教程:製作待辦事項列表
    這就要用到中繼器這個功能。中繼器在英文裡repeater。直譯過來就是中繼器,但是中繼器的作用是「複製」,不如翻譯為複製器更容易理解。我們先建立一個待辦事項的列表頁,命名為待辦事項列表頁,接著將中繼器拖入操作頁面。接著滑鼠點擊中繼器,在屬性中可以查看中繼器,我們可以看到中繼器有三行列表。