Axure RP 9萌新修煉手冊-第五章-交互應用(8)

AxureRP9教程 小樓一夜聽春語 501℃ 0評論

二、添加

在一些管理系統的列表中,需要添加列表條目的功能。

案例30:列表添加數據

例如騰訊云文件存儲的權限組管理界面。(圖5-149)

1、準備相關的元件。

注:本案例元件較多,建議參考RP源文件完成相關元件的準備。

元件按照從上至下、從底層至頂層以及從左至右的順序依次擺放好,完成后將新建權限組的動態面板“OperationPanel”隱藏。(圖5-150)

中繼器編輯狀態中的元件內容:(圖5-151)

動態面板編輯狀態中的元件內容:(圖5-152)

2、完成中繼器基礎操作。

(1)創建模板

模板已經在元件準備中完成創建。

(2)組織數據

權限組列表中默認有一條數據,需要在樣式功能面板中為數據集添加一條默認數據。(圖5-153)

注意,數據中額外添加了一列“GroupID”,默認值為“1”。

這項數據的作用在添加數據時會進行說明。

還有,創建時間除了創建日期外,創建的時、分、秒都是單獨的列,這在添加篩選部分會進行說明。

(3)設置交互

通過設置【每項加載時】的交互讓數據與模板元件綁定。(圖5-154)

具體交互設置可以參考本節第一部分-基礎操作。

交互的設置中,創建時間“CreateTime”是“00:00:00”的格式,我們需要對“CreateHour”、“CreateMinute”以及“CreateSecond”的列值進行拼接,【設置文本】的動作中【值】的具體內容為“[[Item.CreateHour]]:[[Item.CreateMinute]]:[[Item.CreateSecond]]”。

另外,當備注“Remark”列值為空值時,我們要讓權限組列表中對應的列顯示一條短橫線。當權限組是“默認權限組“時,不可以刪除,列表中”操作“項顯示也是一條短橫線。

所以,【每項加載時】會分為三種情形:默認加載、備注為空以及默認權限組。

我們需要為【每項加載時】的交互事件【啟用情形】,將已添加的交互設置為“默認加載”的情形,不添加任何條件。(圖5-155)

然后,點擊【添加情形】的按鈕,設置情形名稱為“備注為空”,添加條件判斷列【值】“[[Item.Remark]]”【==】【值】“”(空值)。(圖5-156)

為“備注為空”的情形,添加動作,為元件“Remark”【設置文本】,【值】為“-”。(圖5-157)

繼續點擊【添加情形】的按鈕,添加名稱為“默認權限組”的情形,條件設置為列【值】“[[Item.GroupName]]”【==】【值】“默認權限組”。(圖5-158)

為“默認權限組”的情形添加2個動作,為“刪除”元件【設置文本】,【值】為“-”;并且【禁用】“刪除”元件,以免橫線能夠執行刪除的交互。(圖5-159)

最后,這3種情形互相之間不應有條件關聯,我們需要在帶有條件的兩個情形上點擊鼠標右鍵,在上下文菜單中選擇【切換為 [如果]或[否則]】,將這兩種情形從【否則】改為【如果】。(圖5-160)

(4)編輯樣式

權限組列表默認【垂直】【布局】,并【多頁顯示】,默認【每頁項數量】為“10”項。(圖5-161)

3、為元件添加交互。

(1)“新建”按鈕被用戶【單擊時】,【顯示】新建權限組的動態面板 “OperationPanel”,同時帶有【燈箱效果】,燈箱效果的【背景顏色】設置為純黑色,不透明度為“50”%。(圖5-162)

(2)用戶在動態面板“CreatePanel”中完成數據的輸入,“確定”按鈕被【單擊時】,需要【添加行】到中繼器的數據集中,添加的數據我們通過系統變量與局部變量進行獲取。(圖5-163)

這里進行一些說明。

  • “GroupName”列值中通過自定義局部變量“groupName”獲取文本框“NameInput”的輸入內容。
  • “Binding”列值默認為“0”。
  • “Remark”列值中通過自定義局部變量“remark”獲取文本框“RemarkInput”的輸入內容。
  • “CreateDate”列值通過系統變量獲取系統的年、月、日數值進行拼接。
  • “CreateHour”、“CreateMinute”以及“CreateSecond”通過系統變量獲取系統的時、分、秒數值。并結合函數改變數值的格式。

注:公式“[['0'.concat(XXX).slice(-2)]]”是在獲取的數值前連接一個“0”之后截取最后2位。

(3)數據添加完畢之后,還要【隱藏】新建權限組的動態面板“OperationPanel”。并且,這個動作還需要復制給“取消”按鈕以及關閉按鈕”Close“。(圖5-164)

三、刪除

權限組管理列表中每一項后方都帶有一個刪除按鈕,在點擊 “刪除”按鈕時,能夠刪除當前行的數據。

如果直接就刪除的話,我們可以通過添加【刪除行】的動作,對【當前】行進行刪除。

不過,一般來說,對數據進行刪除時,為了避免用戶的誤操作,都會再次進行確認才可以刪除。

案例31:列表刪除數據

在點擊“刪除”時,不能直接進行【刪除行】的動作,而是要把當前這一項對應的數據行進行【標記】,確認刪除的時候,刪除【已標記】的行。

這里需要注意,用戶可能點擊某一個“刪除”之后,沒有確認刪除,而又去點擊另外一個“刪除”。

這種情況下,我們需要先將【全部】的數據行【取消標記】,然后再【標記】【當前】所需要刪除的數據行。

1、準備相關的元件。

之前,我們已經有了一個新建權限組的動態面板“OperationPanel”,我們將這個動態面板中原有的狀態命名為“Add”,選中原有的狀態“Add”,點擊【重復】按鈕生成一個新的狀態,命名為“Remove”。

在“Remove”狀態中,我們刪除中間部分的無用元件,再添加新的元件。(圖5-165)

然后,將中繼器“GroupList”編輯狀態中的全部模板元件添加【鼠標懸停】的交互樣式(圖5-166),并【組合】到一起,組合的屬性設置中勾選【觸發內部元件鼠標交互樣式】。(圖5-167)

2、為元件添加交互。

(1)因為動態面板“OperationPanel”新增加了狀態“Remove”,“新建”按鈕【單擊時】,我們需要新增一個【設置面板狀態】為狀態“Add”的動作。(圖5-168)

(2)“刪除”按鈕【單擊時】,我們需要新增一個【設置面板狀態】為狀態“Remove”的動作。(圖5-169)

(3)“刪除”按鈕【單擊時】,我們還要先取消【全部】數據行的標記(圖5-170),再【標記】【當前】項所對應的數據行。(圖5-171)

(4)“刪除”按鈕【單擊時】,需要為 “Remove”狀態中的元件“DeleteGroupInfo”【設置文本】,內容為當前項權限組的名稱。(圖5-172)

 

(5)“刪除”按鈕【單擊時】,將操作面板“OperationPanel”【顯示】出來。(圖5-173)

(6)刪除“Remove”狀態中的“確定”按鈕原有的【添加行】交互,添加【刪除行】的交互動作,刪除【已標記】的數據行。(圖5-174)

(7)為“Remove”狀態中的“取消”和“關閉”按鈕都添加【取消標記】中繼器“GroupList”【全部】行的交互。(圖5-175)

四、排序

案例32:列表排序功能

在騰訊云的控制臺原網站中,新建的權限組列表項會出現在原有列表項上方。

但是,通過中繼器【添加行】的交互所新增加的列表項,默認在下方出現。

解決方案是通過創建時間進行排序。

在中繼器“GroupList”【載入時】,我們【添加排序】,依次添加按秒的列值降序排序、按分的列值降序排序、按小時的列值降序排序以及按日期的列值降序排序。

之所以按照這樣的順序添加,是因為我們疊加排序效果時,會以后添加的為主排序。

因為交互設置都非常相近,此處以按日期的列值“CreateDate”排序為例。(圖5-176)

注:時、分、秒的排序類型為Number(數字)類型,日期的排序類型為Date(日期)類型中的【YYYY-MM-DD】類型。

【提示】圖書案例源文件及素材,請關注微信公眾號“chanpinban”后,回復“萌新手冊”獲取。


~~~~~~~~~~~~ 正文結束 下面沒了 ~~~~~~~~~~~~

小樓老師全新打造Axure RP 9精品課程,以獨有的教學方法與技巧,幫助你以最短的時間高效的完成學習目標。

《Axure RP 9 萌新修煉視頻》-----從零入門進階的優質課程------【點此查看詳情】


轉載請注明:Axure原創教程網 » Axure RP 9萌新修煉手冊-第五章-交互應用(8)

喜歡 (1)or分享 (0)
頭像
發表我的評論
取消評論

表情

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
(1)個小伙伴在吐槽
  1. 頭像
    添加了排序,但是在預覽時沒有任何效果,請問這是Axure軟件的問題還是?
    凌欣2019-05-26 11:42 回復
辽宁快乐12选5走势图表