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

樹形表格常用于處理有結構性的表格數據，例如像分行支行有明顯上下級別的數據，就比較適合用樹形表格的方式查看。本文作者分享了如何在Axure中制作一個多選樹形表格的原型模板，一起來看一下吧。

樹形表格常用于處理有結構性的表格數據，例如像分行支行有明顯上下級別的數據，就比較適合用樹形表格的方式查看，可以直接查看分行數據，也可以打開對應分行，下鉆查看支行的數據。

今天作者就教大家如何在Axure中制作一個多選樹形表格的原型模板。

一、效果展示

1. 點擊表格左側箭頭，可以展開或者收起該行內容的子級內容
2. 點擊父級行的多選按鈕，可以選中或者取消選中當前行內容以及子級行內容
3. 點擊子級行的多選按鈕，可以選中或取消選中當前行的內容，并且根據子級選中的數量自動反選父級行。

二、制作教程

1. 材料準備

制作材料包括中繼器、多選按鈕、箭頭形狀、矩形、文本標簽。

1）表頭

表頭我們用幾個矩形來制作即可，表格有多少列就用多少個矩形拼接。

2）表格內容

表格內容我們用中繼器制作，內容包括箭頭形狀、多選按鈕、矩形和文字標簽，如下圖所示擺放：

多選按鈕——這里我們的多選按鈕不是用自帶的多選按鈕，因為自帶的多選按鈕只有2中狀態（已選和未選），我們需要用三種狀態（已選、半選、未選），所以我們需要自制多選按鈕，我們用動態面板制作即可，在三個state里面分別放入已選、半選、未選的圖片或者形狀即可。

背景矩形——我們用背景矩形包裹住整行的內容，至于底層，需要增加一個選中樣式（淺灰）和禁用演示（淺藍），選中樣式用于和一級行區分，禁用演示是后續制作鼠標移入行時變藍的效果

中繼器表格——表格里需要文字列和功能列，文字列就是column1~6分別對應表格1-6列顯示的內容，功能列包括：shangyiji列，用于記錄該子級的父級，這里需要和column1的父級對應；jiantou列，用于控制是否顯示箭頭，父級行填寫1，子級行或者沒有子級的父級行不需要填寫；fangxiang列用于控制箭頭方向，如果箭頭默認都是向右的，不填就可以了，如果向下就填1；xianshi列，控制那行內容顯示出來，一般父級內容默認顯示填寫1，子級默認隱藏就為空，當然子級也可以默認顯示，這里要配合箭頭方向填寫默認值即可，例如子級默認顯示，父級箭頭對應應該默認向下打開，填寫1；xuanzhong列，用于該行是否被選中，默認為空即可，代表未選中，也可填寫全選或者半選，后續會通過交互設置選中按鈕到對應的狀態。

2. 設置交互

1）中繼器每項加載時交互

我們用設置文本的交互，把中繼器column1~6里面的值，設置到中繼器表格里對應的矩形內。

如果jiantou列的值不等于1，那我們就用顯示隱藏的交互，把箭頭隱藏起來即可；

如果fangxiang列的值等于1，這代表箭頭應該向下，所以我們用旋轉的交互，將箭頭旋轉到向下；

如果xianshi列的值不等于，代表該行數據被收起，暫不顯示，所以我們用隱藏的交互將該行數據影藏起來；

如果shangyiji列的值不等于空，就代表該行是子級行，有對應父級。所以我們用選中的交互，選中背景矩形，因為前面設置了交互樣式，所以這樣子級行就會變成灰色和負極行區分開。

如果xuanzhong列的值為全選，代表選中按鈕被選中，我們用設置面板狀態的交互，將他設置到全選的狀態；xuanzhong列的值為半選，代表子級有選中的，但是不是全部子級都選中，所以我們用設置面板狀態的交互，將他設置到半選的狀態

2）鼠標移入中繼器內行組合時

我們用禁用的交互，將背景矩形禁用，這樣就會有移入變藍的效果；

3）鼠標移出中繼器內行組合時

我們用啟用的交互，將背景矩形啟用；

4）鼠標單擊箭頭時

我們要根據箭頭的方向來判斷，我們可以根據fangxiang列的值判斷箭頭的方向。

如果箭頭是向下的，那我們就要讓箭頭向右，并且把子級行收起，這里我們用更新行的交互，將當前行方向列的值設置為0，然后在用更新行的交互，把shangyiji列里內容為當前行內容的行找出來，更新目標行xianshi列的值為0。

相反，如果箭頭是向右的，那我們就要讓箭頭向下，并且把子級行展開，這里我們用更新行的交互，將當前行方向列的值設置為1，然后在用更新行的交互，把shangyiji列里內容為當前行內容的行找出來，更新目標行xianshi列的值為1。

5）鼠標點擊未選按鈕時

如果點擊的是父級行，就是沒有上一級，就相當于是從未選中變成選中，同時，我們要把該行對應的子級行選中。所以我們用更新行的交互，更新當前行xuanzhong列的值為全選，在更新子級行shangyiji列的值等于該行的值的行，把xuanzhong列的值更新為全選。

如果點擊的是子級行，我們就用更新行內容將當前行xuanzhong列的值更新為全選，然后我們還需要做一個判斷，判斷是不是所有父級的子級都被選中，這里涉及到一個設計選中數的邏輯交互，就是我們需要新建一個記錄文本，記錄選中的數，中繼器開始加載時設置為0，然后每有一行的值為全選，我們就在原來基礎上+1，這樣就可以判斷選中數了。所以我們先篩出和當前行同一個父級的子級，然后在判斷選中數。

那如果記錄選中數和中繼器表格看到的行數一樣，就代表全部的子級都被選中，我們用更新行的交互，更新對應的父級行xuanzhong列的值為全選；

如果記錄選中數和中繼器表格看到的行數不一樣，并且記錄數大于1，代表有部分子級被選中，我們用更新行的交互，更新對應父級行xuanzhong列的值為半選；

如果記錄數等于0，就是一行都沒有被選中，我們用更新行的交互，更新對應的父級行xuanzhong列的值為未選；當然在選中時不會出現該情況，但是在后面取消選中的時候會，所以我們寫好這個交互，后續直接觸發就可以了；

最后我們移除對中繼器的篩選：

6）鼠標點擊半選按鈕時

這里和上面思路基本一致，但是比上面要簡單，因為半選按鈕只有父級行才會出現，所以理論上我們不需要判斷是否為負極，我們直接用更新行的交互，更新當前行xuanzhong列的值為全選，在更新子級行shangyiji列的值等于該行的值的行，把xuanzhong列的值更新為全選。

當然了，如果你懶的話，也可以直接復制鼠標單擊未選按鈕時的交互，復制過來，也可以通用。

7）鼠標點擊全選按鈕時

這里代表我們要從選中變成未選中，這里同樣要分父級行和子級行進行判斷，也是通過判斷shangyiji的值是否為空，如果為空，就代表沒有父級，那他就是父級。這是我們要用更新行的交互，講當前行xuanzhong列的值設置為未選，同時將該行子級行xuanzhong列的值也設置為未選狀態。

如果點擊的是子級行，我們先用更新行的交互，將該行xuanzhogn列的值設置為未選。然后在判斷對應父級行是半選狀態還是未選狀態，這里和上面鼠標單擊未選按鈕的思路是一樣的，都是先篩選出和該行相同父級的子級，然后通過記錄數和表格可視行數的關系，對負級行進行一個反選的操作。

這樣我們就制作完成了多選樹形表格的原型模板了，下次使用時，只需要在中繼器表格里填寫對應信息，預覽是即可自動生成交互效果，包括樹形展開或折疊，選中、全選、取消選中或全部取消、移入行高亮顯示……

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。