中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：本文作者為大家分享了一組Axure中繼器常用交互模板，作者從預(yù)覽原型，到所需原件，再到操作步驟都一一展開了分析，并對(duì)過程中需要注意的問題進(jìn)行了介紹，希望對(duì)你有所啟發(fā)。

上一期和大家分享了Axure交互大全：Axure全交互模板及視頻教程，收到大家的好評(píng)，首先非常感謝大家。那今天就給大家分享多個(gè)交互聯(lián)動(dòng)的教程，主要是關(guān)于中繼器里面全部動(dòng)態(tài)交互，包括新增、刪除、修改、查詢、篩選、排序、分頁、翻頁、導(dǎo)入、導(dǎo)出等效果，該原型可以作為管理后臺(tái)的內(nèi)容模板，讓我們快速完成一個(gè)界面，提高工作效率。

原型演示地址：https://xqp24q.axshare.com

開始教學(xué)：

01 制作中繼器表格

1.1 頁面材料

矩形——根據(jù)實(shí)際的表格內(nèi)容需求，如果需要6列，則放置6個(gè)矩形，自行調(diào)整矩形的寬高

修改按鈕和刪除按鈕——后續(xù)制作動(dòng)態(tài)交互使用

1.2 中繼器表格內(nèi)容

如下圖所示，根據(jù)實(shí)際填寫中繼器表格內(nèi)容

1.3 交互

我們要把中繼器表格的內(nèi)容傳給中繼器內(nèi)的矩形

每項(xiàng)加載時(shí)——設(shè)置矩形的文本為[[Item.ColumnX]]，X代表列數(shù)，例如第一個(gè)矩形，我們?cè)O(shè)置其文本為[[Item.Column1]]，第二個(gè)矩形，就設(shè)置其文本為[[Item.Column2]]……以此類推

1.4 制作完成后的預(yù)覽效果

02 新增行

2.1 頁面材料

• 提交按鈕一個(gè)、取消按鈕一個(gè)、關(guān)閉按鈕一個(gè)。
• 輸入框——N個(gè)根據(jù)表格的內(nèi)容的需求
• 下拉列表——N個(gè)，根據(jù)報(bào)個(gè)的內(nèi)容需求

輸入框和下拉列表根據(jù)需要，例如姓名，這種無法選擇的就應(yīng)該用輸入框，性別這種能選擇的最好就用下拉列表。

如下圖所示擺放美觀即可，然后將以上所有元件組合轉(zhuǎn)為動(dòng)態(tài)面板（新增面板），固定在瀏覽器居中位置，默認(rèn)隱藏。

2.2 交互

這里要提到在表格上方有一個(gè)添加按鈕，鼠標(biāo)點(diǎn)擊添加按鈕是，顯示新增面板。

• 取消和關(guān)閉按鈕：鼠標(biāo)單擊時(shí)隱藏新增面板
• 提交按鈕：鼠標(biāo)單擊提交按鈕時(shí)，我們首先要添加行，然后隱藏動(dòng)態(tài)面板
• 添加行內(nèi)容：[[LVAR1]]是一個(gè)變量，如果是Column1，我們?cè)O(shè)置[[LVAR1]]=第一個(gè)輸入框（下拉列表）的文本值，如果是Column2，我們?cè)O(shè)置[[LVAR1]]=第2個(gè)輸入框（下拉列表）的文本值……以此類推

這樣就基本完成了添加行的動(dòng)作了，不過這里要科普一下，一般而言，在提交的時(shí)候先要判斷必填項(xiàng)是否填寫正確，如果正確才能提交，不正確的話需要提示用戶重新填寫。

03 修改行

3.1 頁面材料

和新增行一致，可以復(fù)制新增面板，然后修改名稱為修改面板。這里注意，一般而言，表格里面需要有一行是唯一編碼的，例如員工號(hào)是唯一的，一旦創(chuàng)建不可修改，所以這里可以把第一個(gè)輸入框禁用或者用矩形代替

3.2 交互

點(diǎn)擊表格中的修改按鈕：

我們要設(shè)置修改面板里面的輸入框或下拉列表的值為列表對(duì)應(yīng)行的內(nèi)容，這里用設(shè)置文本的交互，如果是第一個(gè)輸入框或下拉列表，我們?cè)O(shè)置其文本值為[[Item.Column1]]，第2個(gè)輸入框或下拉列表，我們?cè)O(shè)置其文本值為[[Item.Column2]]……以此類推

設(shè)置文本后，顯示修改面板即可

• 取消和關(guān)閉按鈕：鼠標(biāo)單擊時(shí)隱藏修改面板
• 提交按鈕：鼠標(biāo)單擊提交按鈕時(shí)，我們首先要更新行，然后隱藏動(dòng)態(tài)面板。

上文提到表格里面需要有一行是唯一編碼的，案例中是行員工號(hào)，所以更新行的條件為[[LVAR1==Item.Column1]]，LVAR1是變量，我們選中員工號(hào)的輸入框，Column1是表格里面員工號(hào)所在的列

更新內(nèi)容：[[LVAR1]]是一個(gè)變量，如果是Column1，我們?cè)O(shè)置[[LVAR1]]=第一個(gè)輸入框（下拉列表）的文本值，如果是Column2，我們?cè)O(shè)置[[LVAR1]]=第2個(gè)輸入框（下拉列表）的文本值……以此類推

這樣就基本完成了修改行的動(dòng)作了。同樣，在提交的時(shí)候先要判斷必填項(xiàng)是否填寫正確，如果正確才能提交，不正確的話需要提示用戶重新填寫。這個(gè)不在中繼器交互的范疇就不展開了。

04 刪除行

點(diǎn)擊表格中的刪除按鈕，執(zhí)行刪除該行的交互即可。

05 查詢

5.1 頁面材料

輸入框1個(gè)，搜索按鈕一個(gè)，刷新按鈕一個(gè)

5.2 交互

一般查詢我們會(huì)用模糊查詢，例如我們搜索姓名，輸入張，就能把所有名字里含有張的人查詢出來，這里就是模糊搜索，用篩選事件完成。

如果需要對(duì)列表的第一列進(jìn)行搜索，[[Item.Column1.indexOf(LVAR1)>-1]]，Item.Column1指的是列表的第一列，LVAR1代表輸入框的文字；如果對(duì)第二列進(jìn)行搜索，則為[[Item.Column2.indexOf(LVAR1)>-1]]……以此類推

06 篩選

6.1 頁面材料

下拉列表，這里可以用系統(tǒng)的下拉列表，如果覺得演示比較難看的也可以用自制的下拉列表。

6.2 交互

這里要分兩種情況，如果選擇全部，我們要移除該篩選

如果選擇的不是全部，我們要添加篩選事件，[[Item.ColumnX==this.text]]。例如篩選第一行的時(shí)候，即[[Item.Column1==this.text]]，篩選第二行時(shí)，即[[Item.Column2==this.text]]……以此類推

07 排序

7.1 頁面材料

• 一個(gè)向上的三角形，代表升序
• 一個(gè)向下的三角形，代表降序

7.2 交互

點(diǎn)擊升序三角形時(shí)，添加排序，屬性選擇表格對(duì)應(yīng)列，例如Column1代表第一列，Column2代表第2列……以此類推，排序類型可以根據(jù)需求選擇number（數(shù)字），text（文本），（date）日期，順序選擇升序。

如果點(diǎn)擊降序三角形，除了順序選擇切換，其他和升序三角形一致。

08 分頁

8.1 頁面材料

矩形n個(gè)，里面注明是多少條每頁，例如10條/頁，20條/頁，50條/頁，100條/頁……

8.2 交互

點(diǎn)擊分頁矩形時(shí)，設(shè)置中繼器每頁項(xiàng)目數(shù)為矩形顯示的數(shù)目即可。

09 翻頁

9.1 頁面材料

下一頁和上一頁的按鈕，輸入框和確認(rèn)按鈕

9.2 交互

• 鼠標(biāo)點(diǎn)擊下一頁按鈕時(shí)，設(shè)置中繼器頁面為next
• 鼠標(biāo)點(diǎn)擊上一頁按鈕時(shí)，設(shè)置中繼器頁面為previous
• 鼠標(biāo)點(diǎn)擊確認(rèn)按鈕時(shí)，設(shè)置中繼器頁面為value，輸入具體頁碼為[[LVAR1]]，即輸入的頁面數(shù)

10 導(dǎo)入和導(dǎo)出

10.1 導(dǎo)入

這里只是模擬導(dǎo)入的效果，選擇一個(gè)文本框，類型選擇文件即可。

10.2 導(dǎo)出

這里也是做一個(gè)模擬效果，事前需要將文件上傳，然后鼠標(biāo)單擊導(dǎo)出按鈕時(shí)，打開已上傳文件的url地址即可。

以上就是本期分享的全部?jī)?nèi)容，點(diǎn)下關(guān)注不迷路哦，謝謝觀看。

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

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