Axure RP(2)Client端OPI設計

版本:Axure RP 8.0.0.3303

內容介紹:在“Axure RP(1)Client端OPI設計”中佈局完主界面,功能區是空白的,這次來佈局一個功能區的頁面,這個功能界面定義叫“計劃管理”;

一、效果


二、設計

整體佈局分為三部分,查詢區、操作區、數據列表區。

圖一

查詢區:下拉框是原來做好的,通過複製粘貼到頁面上來對齊即可,自定義下拉框可參考 。下拉框中默認顯示的文字為提示文字,需要設置的話參考圖二。

圖二

操作區:這裡只畫好了按鈕,後續我們再介紹。

圖三

數據列表區:先畫一個動態面板,設置滾動條為“自動顯示滾動條”(圖四),進入動態面板,增加中繼器,添加中繼器列並與中繼器矩形控件綁定對應關係(圖五)。

圖四

圖五

為“查詢”按鈕增加交互,通過查詢區域輸入的條件,篩選數據列表中的數據。這裡因為我自己的數據要求“掛起狀態”(Item.prod_req_hld_st)實現完全匹配查詢,所以增加了case2,case1是“掛起狀態”沒有值輸入的篩選條件(圖六、圖七);case2是“掛起狀態”時的查詢(圖八、圖九),區別case1只是增加了Item.prod_req_hld_st的篩選。注:每個查詢項寫法一樣,圖七展示一個舉列,圖九為單獨的完全匹配貼圖。

圖六

圖七

圖八

圖九

三、其它

動態面板,設置滾動條為“自動顯示滾動條”。第5步查詢交互,case1執行時,先執行一次“全部移出篩選”,不然case2執行完後,case1的執行效果就不行了。