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

編輯導(dǎo)讀：自定義顯示隱藏表格可以為不同的用戶提供個(gè)性化的表格，是頁面設(shè)計(jì)中的常見功能。本文作者用Axure分享如何制作自定義顯示隱藏的中繼器表格，一起來看看吧。

自定義顯示隱藏表格在頁面設(shè)計(jì)里是非常常用的一個(gè)功能，當(dāng)一個(gè)表格有很多列時(shí)，不同的用戶著重點(diǎn)也有所不同，我們就可以通過自定義顯示隱藏的方式，為不同的用戶提供個(gè)性化表格，這就是自定義顯示隱藏表格。用戶可以通過勾選的方式查看需要顯示的內(nèi)容，需要勾選隱藏不重要的內(nèi)容。

制作完成之應(yīng)具備以下交互效果：

1、勾選列名時(shí)顯示該列內(nèi)容，取消勾選列名時(shí)隱藏該列內(nèi)容

2、可以對不同列的數(shù)據(jù)進(jìn)行模糊搜索

3、制作完成后新增行內(nèi)容可以直接在中繼器表格中填寫，自動生成交互效果

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

一、用矩形制作表格表頭

我們用矩形元件來制作表格的表頭，表格有多少列就用多少個(gè)矩形，如下圖所示擺放

這里我們把每一格命名好，這樣方面我們后續(xù)制作交互

二、用中繼器制作表格內(nèi)容

我們在中繼器里面添加矩形元件，和上面表頭一樣，有多少列就放多少個(gè)矩形，這里注意每一列需要和上面表頭對應(yīng)的矩形的寬是一樣的，最后一列操作我們放入修改和刪除按鈕，如下圖所示擺放

案例中有7列，出去最后一列共六列有實(shí)際內(nèi)容的，所以我們設(shè)置中繼器表格總共需要6列，Column1~6，分別對應(yīng)中繼器里矩形1~6，我們在中繼器表格里填寫好內(nèi)容，如下圖所示：

之后我們在中繼器每項(xiàng)加載時(shí)用設(shè)置文本的交互，將中繼器里Column1~6列的值設(shè)置到中繼器表格內(nèi)矩形1~6里

三、用多選框制作選擇顯示列

表格有多少列就對應(yīng)多少個(gè)多選框，多選框的內(nèi)容最好和表頭標(biāo)題一一對應(yīng)，如下圖所示擺放

在多選框選中時(shí)，我們用顯示的交互，將對應(yīng)的表頭和表格的矩形顯示即可，這里我們選擇推動的效果；

同樣道理，在多選框取消選中時(shí)，我們用隱藏的交互，將對應(yīng)的表頭和表格的矩形隱藏。

四、制作搜索效果

如果我們需要分類搜索的話，一般會用到分類搜索框，這里需要我們先制作好一個(gè)下拉的分類搜索框，需要文本標(biāo)簽，矩形，輸入框，下拉圖表，搜索圖標(biāo)，圖表和選擇器，選擇器可以用中繼器來制作，也可以用幾個(gè)矩形做成組合，如下圖所示擺放。

我們根據(jù)選擇不同的內(nèi)容，搜索不同的列，例如我們選擇的是員工姓名，那么我們就搜索第二列，我們需要用到indexof的函數(shù)，這個(gè)函數(shù)結(jié)果大于負(fù)一，就代表包含搜索的內(nèi)容，否則就不包含，所以我們用篩選事件，將結(jié)果大于負(fù)一的行篩選出來即可。這里我們還要看一下是否有其他類型的篩選，如果有其他類型的篩選，我們就不能勾選移除其他篩選，將該篩選命個(gè)名，在篩選前可以用移除篩選的操作將這個(gè)名稱的篩選先移除，然后再按條件篩選。

最后是重置按鈕的交互，我們先用設(shè)置文本的交互，把輸入框的內(nèi)容設(shè)置為空值，然后在用移除篩選的交互，將剛剛搜索的篩選移除。

那么以上就是Axure高保真原型——多選穿梭框的制作教程了，感謝您的閱讀，我們下期見，88~

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

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