【Axure 教程】中繼器入門教程-數(shù)據(jù)增刪

Sam
1 評論 3831 瀏覽 6 收藏 4 分鐘

編輯導(dǎo)讀:當(dāng)工作中需要進行數(shù)據(jù)增刪操作時,我們可以如何使用Axure來進行相關(guān)操作呢?本篇文章里,作者利用中繼器為我們展示了數(shù)據(jù)增刪操作,讓我們一起來看一下。

原型展示:https://lyz96n.axshare.com


所需原件:

  1. 中繼器
  2. 文本款
  3. 文本標(biāo)簽
  4. 下拉列表

本文主要講解中繼器的基本用法,以便大家更容易去理解和學(xué)習(xí)中繼器的高級用法,入門教程會分為 6 個小節(jié),本節(jié)主要講解如何實現(xiàn)列表的數(shù)據(jù)增刪

一、列表制作

這里我們直接引用課程 【Axure 教程】中繼器入門教程-列表制作 中制作的列表,快速修改表頭和中繼器數(shù)據(jù)后,得到一個列表,如上圖;

二、表單設(shè)置

根據(jù)示例,我們需要兩個文本框,分別作為【姓名】和【年齡】的賦值,下拉框作為【性別】的賦值,如上圖所示;

三、創(chuàng)建數(shù)據(jù)

拖入文本標(biāo)簽,編輯為【添加】按鈕,創(chuàng)建交互

選擇添加行,并在行數(shù)據(jù)中設(shè)置數(shù)據(jù)來源;

特別地,如果是下拉框,則需要將局部變量設(shè)置為【被選項】,如上圖所示;

四、刪除數(shù)據(jù)

雙擊中繼器,選中【刪除】文本標(biāo)簽,設(shè)置交互:【單擊時】刪除【當(dāng)前行】;

五、細節(jié)優(yōu)化

我們希望如果創(chuàng)建數(shù)據(jù)時,數(shù)據(jù)為空則不執(zhí)行添加行的交互,并且標(biāo)記文本框和下拉列表,如下圖設(shè)置;

此外,希望在創(chuàng)建完成數(shù)據(jù)后,表單數(shù)據(jù)重置,因此,在添加行后,將文本框置空并將下拉列表重置默認(rèn)選項,如下圖所示;

 

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

題圖來自Unsplash, 基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享,請問在中繼器制作的列表已有幾條示例數(shù)據(jù)的情況下,如何把新增行添加至列表最上方呢?

    來自上海 回復(fù)