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

編輯導(dǎo)語(yǔ)：在系統(tǒng)操作中，批量操作是常用的操作方式，本篇作者就教大家如何在Axure中制作一個(gè)能多選和批量操作的原型模板，并對(duì)該步驟進(jìn)行了梳理，分享給你，希望對(duì)你有所幫助。

在系統(tǒng)操作中，批量操作是常用的操作方式，例如批量啟用、批量禁用、批量刪除、批量下載……

所以今天作者就教大家如何在Axure中制作一個(gè)能多選和批量操作的的原型模板，該原型主要使用中繼器制作，所以復(fù)用性很高，再次使用時(shí)只需填寫(xiě)中繼器表格內(nèi)容，自動(dòng)實(shí)現(xiàn)交互效果。完成后如下如所示效果：

原型地址：https://ieg95e.axshare.com/#g=1

一、材料準(zhǔn)備

1. 按鈕組

準(zhǔn)備4個(gè)不同顏色的按鈕，分別是批量啟用、批量禁用、批量刪除和批量導(dǎo)出。

2. 提示彈窗

提示彈窗的用途是當(dāng)用戶沒(méi)有選中表格內(nèi)容并且點(diǎn)擊了批量操作的按鈕，這樣時(shí)會(huì)彈出提示用戶要先選擇批量操作的內(nèi)容。彈窗用提示圖標(biāo)和矩形制作，具體樣式可以參考下圖。

3. 表頭

表頭由多選框、矩形背景和文本標(biāo)簽組成。

多選框（全選按鈕）——包含未選狀態(tài)和已選狀態(tài)，放在同一個(gè)動(dòng)態(tài)面板的兩個(gè)狀態(tài)內(nèi)。

文本標(biāo)簽——填寫(xiě)每列列名，自行調(diào)整尺寸和位置即可。

4. 表格內(nèi)容

表格內(nèi)容主要由中繼器制作而成，中繼器表格內(nèi)部元件包括:

• 多選框——包含未選狀態(tài)和已選狀態(tài)，放在同一個(gè)動(dòng)態(tài)面板的兩個(gè)狀態(tài)內(nèi);
• 文本標(biāo)簽——對(duì)應(yīng)中繼器表里每列的內(nèi)容，自行調(diào)整尺寸和位置即可。
• 開(kāi)關(guān)按鈕——包括開(kāi)狀態(tài)（啟用）的按鈕和關(guān)狀態(tài)（禁用）的按鈕。
• 按鈕——維護(hù)和刪除按鈕，這里用文本標(biāo)簽制作即可。
• 背景框——默認(rèn)透明，添加選中樣式為淺藍(lán)色。

將上述所有元件組合在一起，方便后續(xù)添加交互，如下圖所示。

中繼器表格如下圖所示：

• Column1——中繼器內(nèi)第一個(gè)文本標(biāo)簽顯示的值。
• Column2——中繼器內(nèi)第二個(gè)文本標(biāo)簽顯示的值。
• Column3——中繼器內(nèi)第三個(gè)文本標(biāo)簽顯示的值。
• Column4——中繼器內(nèi)第四個(gè)文本標(biāo)簽顯示的值。
• qiyong——開(kāi)關(guān)按鈕的狀態(tài)，如果值等于啟用，則顯示開(kāi)狀態(tài)的按鈕；否則就顯示關(guān)狀態(tài)的按鈕。
• xuanzhong——通過(guò)改列的值控制是否被選中，如果值等于1，則該行被選中，否則則未被選中。

5. 記錄文本

新建一個(gè)文本標(biāo)簽，默認(rèn)隱藏，該文本用于記錄選中的行數(shù)。

二、交互制作

1. 中繼器每項(xiàng)加載時(shí)交互

1）選中記錄歸零

在中繼器開(kāi)始加載第一條的時(shí)候（item.index==0），我們首先要設(shè)置記錄文本為0，這樣就可以保證中繼器每次加載開(kāi)始時(shí)，記錄的選中數(shù)都為0。

2）設(shè)置中繼器內(nèi)文本標(biāo)簽顯示的內(nèi)容

接下來(lái)中繼器開(kāi)始加載，我們要把中繼器表格內(nèi)的內(nèi)容設(shè)置到中繼器里面對(duì)應(yīng)的文本標(biāo)簽，例如設(shè)置文本標(biāo)簽1的值=表格第一列的值（item.column1），文本標(biāo)簽2的值=表格第2列的值（item.column2）；文本標(biāo)簽3的值=表格第3列的值（item.column3），文本標(biāo)簽4的值=表格第4列的值（item.column4）……

3）設(shè)置選中時(shí)的交互

如果表格所在行xuanzhong列為1，即該行被選中，這時(shí)我們首先要將中繼器表格內(nèi)動(dòng)態(tài)面板設(shè)置為選中的狀態(tài)。然后設(shè)置記錄文本他原來(lái)的值+1，這樣每當(dāng)有一行選中時(shí)，記錄文本的值都會(huì)在原來(lái)基礎(chǔ)+1，有幾個(gè)+1就代表選中了幾行，所以記錄文本的值為幾，就代表有幾行被選中。

4）啟用和禁用

如果jinyong列的值為啟用，那我們就顯示開(kāi)關(guān)的開(kāi)狀態(tài)，并且隱藏關(guān)狀態(tài)；否則我們就隱藏開(kāi)狀態(tài)，顯示關(guān)狀態(tài)，因?yàn)槲覀兊拈_(kāi)關(guān)按鈕默認(rèn)是關(guān)的狀態(tài)，所以后面否則的交互也可以不用寫(xiě)，因?yàn)橹灰獙?duì)應(yīng)表格里的文字不是啟用，就自動(dòng)顯示關(guān)狀態(tài)。

5）觸發(fā)交互

在中繼器加載完成后（Item.isLast==true），我們還要觸發(fā)記錄文本單擊時(shí)的交互，來(lái)判斷是否需要選中表頭的全選按鈕。

2. 記錄文本鼠標(biāo)單擊時(shí)交互

這里我們需要分兩種情況，第一種是記錄文本的值等于中繼器可以看見(jiàn)的行數(shù)，即（this.text==LVAR1.visibleItemCount）,如果這種情況成立，那么就設(shè)置表頭里面的動(dòng)態(tài)面板的狀態(tài)為選中狀態(tài)；否則則為未選中的狀態(tài)。這里解釋一下為什么要用中繼器可見(jiàn)行數(shù)，因?yàn)楹罄m(xù)還可能添加搜索、篩選、分頁(yè)的情況，如果不是選可視行數(shù)，那個(gè)時(shí)候就會(huì)出現(xiàn)問(wèn)題。

3. 中繼器表格內(nèi)多選按鈕鼠標(biāo)單擊時(shí)交互

如果點(diǎn)擊的是未選中的多選框，這里我們直接用更新行事件，更新當(dāng)前行的xuanzhong列值為1，因?yàn)樯厦娴慕换?，?dāng)它的值變?yōu)?時(shí)，就會(huì)重新加載，在中繼器每項(xiàng)加載時(shí)，xuanzhog的值等于1，就會(huì)把該行選中，這里是靈活的運(yùn)用了中繼器里的值控制是否選中。

如果點(diǎn)擊的是已選中的多選框，這里我們同樣用更新行事件，更新當(dāng)前行的xuanzhong列的值為0，這樣在中繼器自動(dòng)加載時(shí)就會(huì)變回未選中的狀態(tài)。

4. 中繼器表格內(nèi)開(kāi)關(guān)按鈕鼠標(biāo)單擊時(shí)交互

當(dāng)開(kāi)關(guān)按鈕顯示的是禁用狀態(tài)時(shí)，點(diǎn)擊“關(guān)”按鈕時(shí)，我們用更新行事件，更新該行jinyong列的值為啟用，這樣中繼器自動(dòng)加載的時(shí)候，因?yàn)樵撔械闹禐榻?，所以開(kāi)關(guān)的狀態(tài)就會(huì)自動(dòng)由關(guān)變成開(kāi)。

同樣的，當(dāng)開(kāi)關(guān)按鈕顯示的是啟用狀態(tài)時(shí)，點(diǎn)擊“開(kāi)”按鈕時(shí)，我們用更新行事件，更新該行jinyong列的值為禁用，這樣在中繼器自動(dòng)加載的時(shí)候，開(kāi)關(guān)的狀態(tài)也自動(dòng)會(huì)變成關(guān)。

5. 表頭全選按鈕鼠標(biāo)單擊時(shí)交互

如果點(diǎn)擊的是未選中的全選按鈕，相當(dāng)于需要全選下面的內(nèi)容，所以我們也是用更新行的事件，更新的條件是中繼器內(nèi)可見(jiàn)的行，然后將xuanzhong列的值更新為1，這樣中繼器自動(dòng)重新加載時(shí)就可以全選可以看到的行。這里用可視的行的原因和前面一樣，因?yàn)楹罄m(xù)還可能添加搜索、篩選、分頁(yè)的情況，如果不是選可視行，那個(gè)時(shí)候就會(huì)出現(xiàn)問(wèn)題。

完成之后還要設(shè)置該動(dòng)態(tài)面板到選中的狀態(tài)。

如果點(diǎn)擊的是未選中的全選按鈕，相當(dāng)于需要取消下面全部?jī)?nèi)容的選中，所以我們也是用更新行的事件，更新的條件是中繼器內(nèi)可見(jiàn)的行，然后將xuanzhong列的值更新為0，這樣中繼器自動(dòng)重新加載時(shí)就可以將可以看到的行全部取消選中。完成之后還要設(shè)置該動(dòng)態(tài)面板到未選中的狀態(tài)。

6. 批量按鈕鼠標(biāo)單擊時(shí)事件

1）判斷是否有選中內(nèi)容

點(diǎn)擊批量處理按鈕時(shí)，我們首先要判斷是否有內(nèi)容被選中，如果沒(méi)有選中，我們先顯示提示彈窗，這一部的判斷是4個(gè)按鈕都一樣的。那么我們?cè)鯓优袛嗍欠褚呀?jīng)有內(nèi)容被選中呢？前面我們提到了記錄文本的作用，就是可以記錄有多少行內(nèi)容被選中，如果沒(méi)有內(nèi)容被選中，記錄文本的值==0，這時(shí)我們顯示提示彈窗即可。

如果記錄文本的值不等于等，代表有內(nèi)容已被選中，根據(jù)不同的按鈕，設(shè)置不同的交互內(nèi)容。

2）批量啟用

鼠標(biāo)單擊批量啟用按鈕時(shí)，如果有內(nèi)容被選中，我們用更新行事件，將選中行qiyong列的值更新為啟用，因?yàn)閤unzhong列是控制行是否被選中的，所以更新條件為xuanzhong列的值==1

3）批量禁用

批量禁用和批量啟用其實(shí)基本一樣，就是更新行的時(shí)候，將qiyong列的值變成禁用而且，更新的條件同樣是xuanzhong列的值==1

4）批量刪除

鼠標(biāo)單擊批量啟用按鈕時(shí)，如果有內(nèi)容被選中，我們用刪除行事件，刪除條件為xuanzhong列的值==1

5）批量導(dǎo)出

因?yàn)閍xure是沒(méi)有辦法根據(jù)表格內(nèi)容導(dǎo)出文件的，所以沒(méi)有辦法實(shí)現(xiàn)動(dòng)態(tài)的交互，如果真的有演示的需要，我們可以寫(xiě)死，即事前將對(duì)應(yīng)的excel表格上傳到服務(wù)器，當(dāng)鼠標(biāo)單擊批量導(dǎo)出按鈕時(shí)，用打開(kāi)鏈接的交互，url地址填寫(xiě)文件的網(wǎng)絡(luò)地址，這樣就可以實(shí)現(xiàn)導(dǎo)出下載的模擬效果。

這樣，我們就完成了能多選、能批量操作的原型模板了，以后使用的話，我們可以直接在excel表格中填寫(xiě)好數(shù)據(jù)，再?gòu)?fù)制到中繼器表格即可，是不是很方便快捷呢？

那以上就是本期的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見(jiàn)，88~~~

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

題圖來(lái)自Unsplash，基于CC0協(xié)議