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

編輯導(dǎo)語：在多分組的篩選場景下，樹形穿梭框較為常用，一般應(yīng)用于數(shù)據(jù)、名單的選擇。那么，應(yīng)該如何制作樹形穿梭框？本篇文章里，作者總結(jié)了一份樹形穿梭框的Axure教程，一起來看一下。

樹形穿梭框常用于多分組之間的篩選，例如從多個營業(yè)廳、多個部門中選擇優(yōu)秀員工，又或者從不同的班級里面挑選學(xué)生比賽。樹形穿梭框就能應(yīng)用于多分組條件中選擇具體數(shù)據(jù)、名單的情況。

下面我會通過評選積極員工的樹形穿梭框為案例教程，矩形效果如下圖所示：

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

一、主要材料

1. 樹元件

即左上角營業(yè)網(wǎng)點部分的元件，我們用axure里面原生的樹元件即可。

2. 中繼器1（員工名單）

即右上角員工名單的中繼器，中繼器內(nèi)部是多選框組成。中繼器表格有4列組成：

• Column1——代表該員工所在的營業(yè)廳，對應(yīng)上面樹元件的營業(yè)廳；
• Column2——代表員工姓名；
• Column3——代表員工職位；
• xuanzhong——代表多選框是否選中，默認為空即可。

3. 中繼器2（已選名單）

即下面已選名單內(nèi)容，中繼器內(nèi)部由矩形和關(guān)閉按鈕X組成。中繼器表格內(nèi)僅需要一列Column0，代表員工姓名既可以。

二、思路講解

這個原型主要是通過選擇樹節(jié)點（選擇對應(yīng)的營業(yè)廳），根據(jù)不同的營業(yè)廳，篩選出該營業(yè)廳下對應(yīng)的員工；然后在員工名單中選中員工后，出現(xiàn)在已選名單中，如果取消選中，則消失在已選名單中；如果在已選名單中取消員工，那么也應(yīng)該在員工名單中取消選中。

這個原型主要涉及以下的交互邏輯：

1. 篩選——篩選出選中營業(yè)廳下對應(yīng)的員工；
2. 兩個中繼器之間的交互，兩個中繼器之間值的傳遞。

三、交互制作

1. 樹元件的交互

當(dāng)鼠標(biāo)單擊樹節(jié)點時（營業(yè)廳節(jié)點），添加對中繼器1（員工名單的中繼器）篩選事件，篩選條件為中繼器1的Column1的值等于當(dāng)前鼠標(biāo)單擊的樹節(jié)點的值相同。因為有很多個樹節(jié)點（營業(yè)廳），所以我們用this.text，這樣就可以直接將這個交互復(fù)制粘貼到所有的樹節(jié)點。

默認顯示的營業(yè)廳，例如案例的第一個天河區(qū)營業(yè)廳，在載入是還需要用到觸發(fā)事件，觸發(fā)當(dāng)前節(jié)點鼠標(biāo)單擊時的交互。

2. 中繼器1（員工名單的中繼器）的交互

在中繼器1每項加載時，我們將多選框的文字設(shè)置為中繼器第二列員工姓名和第三列員工職位的值，例如員工姓名1（客戶經(jīng)理），你們也可以根據(jù)實際需要顯示的內(nèi)容來設(shè)置。

然后還需要增加一個條件，我們通過用中繼器第四列的值控制多選框是否選中，所以如果xuanzhong列的值等于1，這是我們設(shè)置多選框為選中狀態(tài)，否則就默認為非選中狀態(tài)。

在每項加載時，我們增加情形2，對應(yīng)條件為item.xuanzhong==1，如果符合該條件，執(zhí)行交互，設(shè)置多選框的為選中狀態(tài)。如果item.xuanzhong不等于1，理論上我們要設(shè)置多選框為非選中狀態(tài)，但是因為多選框默認為非選中狀態(tài)，所以我們不需要多此一舉，后半段的交互就可以不用寫了。

在多選框的上面我們需要增加一個熱區(qū)擋住多選框，因為多選框是否選中是由中繼器xuanzhong列的值決定的。所以多選框上的熱區(qū)時，能防止鼠標(biāo)直接點擊改變多選框的是否選中。

在鼠標(biāo)單擊多選框上面的熱區(qū)時，我們需要分兩種情況。

1）情況1

當(dāng)xuanzhong列的值等于1，即原本是已選中的狀態(tài)，從已選中到未選中，我們執(zhí)行更新行的交互，更新當(dāng)前行xuanzhong列的值為0，這要就可以取消選中。

除此之外，因為本來是已選中的狀態(tài)，所以在中繼器2（已選名單的中繼器）里面本來是有這個名單的，我們需要在中繼器2里刪除這位取消選中的員工，所以執(zhí)行刪除行的交互，刪除的條件為Item.Column2的值等于 TargetItem.Column0的值，Item.Column2就是對應(yīng)員工名單中繼器里的員工名字；TargetItem.Column0就是對應(yīng)已選員工中繼器里的員工名字。

2）情況2

當(dāng)上面的情緒不成立（xuanzhong列的值不等于1），即原本是未選中的狀態(tài)，從未選中到選中，我們首先要執(zhí)行更新行的交互，更新當(dāng)前行xuanzhong列的值為1，這樣就可以選中當(dāng)前行的多選框。

然后，我們還要將該員工的名稱添加到已選名稱中，所以我們需要用添加行的交互，添加的值為Item.Column2（員工名稱）。

3. 中繼器2（已選名單的中繼器）的交互

當(dāng)中繼器2每項加載時，我們要設(shè)置中繼器2里面的矩形的文本==Item.Column0，這個交互是默認的，如果沒有刪除過一般不需要我們寫。

需要我們寫的是當(dāng)鼠標(biāo)單擊取消X按鈕時的交互，如果我們想刪去這個員工的名單，要做兩個交互，一個是刪除當(dāng)前中繼器的當(dāng)前行，例一個是取消中繼器1（員工名單中繼器）對應(yīng)員工的選中。

我們要先做取消中繼器1（員工名單中繼器）對應(yīng)員工的選中，因為如果先刪除當(dāng)前行的話，刪除之后找不到對應(yīng)的值去更新了，所以我們要先更新中繼器1，我們執(zhí)行更新行的交互，更新的條件是Item.Column0==TargetItem.Column2，將xuanzhong列的值更新為0即可。

這樣我們就完成制作樹形穿梭框了，如果樹的內(nèi)容比較多，或者中繼器內(nèi)容比較多，還可以將他們轉(zhuǎn)成動態(tài)面板增加滑動條。也可以自己美化樣式，例如鼠標(biāo)懸停時的樣式等等。

制作完成后，下次使用的話只需要修改樹節(jié)點和中繼器1里面的內(nèi)容，即可自動生成交互效果，復(fù)用性極強。

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

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

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