Axure9.0:0基礎學習中繼器的增刪改查操作(下)

0 評論 1330 瀏覽 2 收藏 8 分鐘

編輯導語:利用中繼器進行增刪改查是我們常見的操作。在上篇文章里,作者介紹了如何利用中繼器進行查詢操作,本文作者針對初學者、分享了如何利用中繼器進行增刪改查操作,相信這對于初學者的你會有所幫助。

上期已經介紹了最簡單的利用中繼器進行查詢操作,收到的反饋效果較為理想,這次出接下來的增刪改操作。0基礎直接上手,小白建議先看上期,上期說到準備的元件還有動態面板在這期需要用到。

直接上教程。

一、添加操作

先放一個添加按鈕,再制作一個添加彈窗。

添加彈窗很簡單,拖一個灰色矩形覆蓋掉原頁面內容,再改變透明度;作為背景,拖一個動態面板作為中間彈窗即可,將兩個元件組合即可,效果如下。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

雙擊動態面板,進入動態面板第一個狀態,為了好看,建議放一個白色矩形作為底色。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

之后添加需要增加的信息,序號列已使用index函數,所以序號列不用增加。

添加姓名、電話、地址文本框(需要輸入信息)。為三個文本框命名,方便添加交互時比較好找,此處就以姓名、電話、地址來命名,如下。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

關鍵點來了,為取消和確定按鈕添加交互,點擊取消直接隱藏該彈窗即可。彈窗之前已經分組,所以直接在單擊時隱藏該彈窗即可。

點擊確定按鈕,操作如下:

單擊時→添加行→選擇目標中繼器→點擊添加行→彈窗點擊函數→添加局部變量→插入變量→點擊保存。依次為姓名、電話、地址框添加。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

點擊保存之后根據個人對保真的要求程度設置以下操作。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

接下來為了效果,先隱藏掉彈窗按鈕,點擊添加,顯示彈窗。輸入信息點擊確定,添加成功。預覽看效果。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

效果圖:設置成功。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

二、刪除操作

刪除操作較為簡單。在中繼器的操作框添加刪除和編輯的按鈕,具體操作,雙擊中繼器,在操作框添加即可。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

制作刪除彈窗,在添加操作的動態面板增加一個狀態。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

制作刪除的二次確認彈窗。同上,需要姓名、電話、地址三個信息的獲取。具體操作如下。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

彈窗制作好之后為刪除按鈕添加交互,進入中繼器,選中刪除按鈕,單擊時→顯示彈窗→設置動態面板的狀態切換到刪除狀態→取消標記中繼器中全部的行→標記中繼器當前行→設置文本。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

此時數據已傳輸,進入動態面板刪除狀態,點擊確定→新建交互→單擊時→刪除行→選擇中繼器→已標記→確定。刪除操作成功。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

效果圖:點擊刪除按鈕。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

確定刪除數據,點擊確定。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

刪除行成功。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

三、編輯操作

編輯操作彈窗同刪除操作彈窗,直接復制刪除彈窗中的內容,注意確定按鈕上的交互需要清除。

編輯的按鈕設置同刪除按鈕的操作相同,注意需要改變面板的狀態到編輯狀態,設置文本的元件更換到編輯狀態中的。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

接下來設置編輯狀態面板中的確定按鈕。

點擊時→更新行→目標選擇中繼器→已標記→依次選擇值設置全局變量→插入變量。設置完成。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

預覽:點擊編輯。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

更改文字內容,點擊確定。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

編輯成功。

axure9.0:0基礎學習中繼器的增刪改查操作-下(增、刪、改)

本期教程主要針對0基礎學習交互的朋友,這一期到此結束,歡迎大家指點交流。大家有想學的可以留言~

 

作者:小楊pm,微信公眾號:老楊說產品

本文由@小楊pm 原創發布于人人都是產品經理,未經許可,禁止轉載。

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

給作者打賞,鼓勵TA抓緊創作!
2人打賞
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!