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

編輯導語：我們經常需要用到表格日期篩選這個功能，但你了解它的運行邏輯嗎，在中繼器表格中的日期篩選模型該怎么制作呢？本文作者十分詳細的給我們講述了在axure中時間篩選的步驟，一起來看看吧！

時間篩選是系統里常用的功能，用戶可以根據不同的時間段，快速的篩選所需要的數據。所以我們今天來學習在axure中如何進行時間篩選呢？制作完成后的模板效果如下圖所示：

一、材料準備

1. 日期選擇器

日期選擇器用中繼器版的，因為系統的自帶的日期里面日期中繼器返回的文字無法提取，而且用中繼器版的日期中繼器，交互邏輯都可以自己寫，可以返回對應的時間文本。

這里需要注意的是返回的日期文本的格式需要設置為yyyy/mm/dd的格式，因為后續我們會用到Date.parse(datestring)函數，這條函數可以計數該日期與1970年1月1日00:00:00之間相差的毫秒數，datestring為日期，格式為：yyyy/mm/dd hh:mm:ss。所以我們可以通過該公司計算將日期轉化為數字，從而比較大小。

我們需要兩個日期選擇器，一個是開始時間，一個是結束時間。

2. 表格內容

表格由表頭和中繼器表格組成

（1）表頭

表頭我們用普通矩形制作即可，填寫表頭文字，樣式可以根據偏好設置。案例中將矩形命名為表1-表6，方面后續我們設置交互。

（2）中繼器表格

中繼器內元件：矩形+按鈕

矩形和上邊表頭一致，樣式修改為透明色，這樣可以設置交替的背景色，實現斑馬線效果。

按鈕為修改和刪除，放在操作列，可以根據實際情況增加或減少按鈕數量

中繼器表格填寫：

共6列，分別是column1~column6，具體內容分別對應表頭1-6的內容，column1是員工編號，column2是姓名，column3是職位，column4愛好，column5是籍貫，column6是日期，具體表格內容可以根據實際內容修改。這里注意的是增加內容的話，就需要增加中繼器內的矩形，后續需要通過交互，將中繼器表格的值設置到矩形文字。

3. 按鈕

查詢和重置按鈕，用不同顏色區分即可。

4. 其他元件

可以根據你們實際情況增加，例如排序符號、分頁組件、搜索組件、篩選組件等等，因為今天內容主要是講解日期篩選的，所以就不增加這些內容，你們在制作的時候可以根據實際情況來增加。

二、交互制作

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

中繼器每項加載時，我們用設置文本的交互，將表格列column1~6列的內容，一一對應，設置到中繼器內表1~表6的矩形。

2. 查詢按鈕鼠標單擊時

查詢按鈕鼠標單擊時，即根據用戶選擇的時間段進行篩選，這里我們要分4種情況來討論。

情況1：開始篩選時間和結束篩選時間都不為空，即用戶開始和結束的時間都選擇了

這里我們篩選的條件為Date.parse(Item.Column6)>=Date.parse(LVAR1)&Date.parse(LVAR2)>=Date.parse(Item.Column6)，前面我們也有講到Date.parse(datestring)函數是可以計數該日期與1970年1月1日00:00:00之間相差的毫秒數，所以Date.parse(Item.Column6)就是把表格中的時間轉化為數字（Column6是時間列），Date.parse(LVAR1)這個是將已選擇的開始時間轉化為數字，Date.parse(LVAR2)是將結束時間轉化為數字。其實就是減時間格式yyyy/mm/dd轉化為數字再比較大小，整條公式的含義為，表格中的時間要大于已選擇的開始時間，并且小于已選則的結束時間。

情況2：開始篩選時間不為空且結束篩選時間為空，即用戶僅選擇了開始時間

這里我們篩選的條件為Date.parse(Item.Column6)>=Date.parse(LVAR1)，同樣的，Date.parse(Item.Column6)就是把表格中的時間轉化為數字（Column6是時間列），Date.parse(LVAR1)這個是將已選擇的開始時間轉化為數字。整條公式的含義為，篩選出表格中的時間大于已選擇的開始時間。

情況3：開始篩選時間為空且結束篩選時間不為空，即用戶僅選擇了結束時間

這里我們篩選的條件為Date.parse(Item.Column6)>=Date.parse(LVAR1)，同樣的，Date.parse(Item.Column6)就是把表格中的時間轉化為數字（Column6是時間列），Date.parse(LVAR1)這個是將已選擇的開始時間轉化為數字。整條公式的含義為，篩選出表格中的時間小于已選擇的結束時間。

情況4：開始篩選時間和結束篩選事件均為空，即用戶沒有選擇時間

這里我們移除篩選顯示所有數據即可。

4. 重置按鈕鼠標單擊時

重置按鈕單擊時，其實就是一個還原的操作，一個是移除表格所有的篩選，另外一個是將時間選擇器恢復到未選擇的情況，所以我們先用設置文本，將時間選擇器設為默認文字，然后在將開始篩選事件和結束篩選事件設置為空，這樣就是沒有選擇。然后移出表格的篩選，因為上面我們寫了如果開始和結束時間都未選擇時，鼠標單擊查詢按鈕時就移出篩選，所以這里我們直接用觸發事件觸發查詢按鈕鼠標單擊時的交互即可。

這樣，我們就完成了中繼器表格日期篩選的原型模板了，以后使用的話只要修改表格內容，或者可以直接復制excel內容到中繼器表格，是不是非常便捷呢？

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

本文由 @做產品但不是經理 原創發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議