Axure高保真教程:自動生成頁碼的中繼器表格

3 評論 3873 瀏覽 6 收藏 9 分鐘

在日常工作中,當數據或信息過多時,我們可能會需要分頁顯示,這個時候,你要怎么實現根據表格數據自動生成頁碼的效果?本篇文章里,作者便分享了如何在Axure中實現這一效果的方式。一起來看看作者的總結。

當表格數據較多時,我們經常會分頁顯示,這時我們就需要用到頁碼的元件了。所以作者今天就教大家如何在Axure中制作一個能自動根據中繼器表格的數據以及分頁情況,自動生成對應頁碼的原型模板。

一、效果展示

  1. 頁碼能根據表格數據和每頁顯示條數自動生成。
  2. 點擊頁碼可以跳轉至對應的頁面。
  3. 增加、刪除、搜索、篩選、分頁后自動生成對應的頁面。

二、制作教程

1. 中繼器表格的制作

這個比較簡單,我們在中繼器里添加矩形即可,有多少列就添加多少個矩形。

中繼器表格也是,有多少列就新增多少列,這里注意操作列是不需要增加的,內容列才需要增加,案例中就是員工編號、姓名、職位、愛好、籍貫、學歷6列主要內容。

填寫好表格內容后,在中繼器每項加載時,我們用設置文本的交互,將每列的內容設置到中繼器表格里對應的矩形內。

這樣中繼器表格內容部分就完成了。

2. 頁碼的制作

這里頁碼我們也是用中繼器來制作,因為只有中繼器才能實現增減的動態效果。

在中繼器里放入矩形元件,矩形要增加選中樣式,案例中是藍色,用于回顯當前是在第幾頁。

中繼器表格里共兩列,一列(Column0列)是記錄頁數的,第二列(true列)是用來記錄哪列被選中的。兩列默認為空即可,后面會通過交互讓頁碼自動增加。

中繼器每項加載時,我們用設置文本的交互,將index的值(就是第幾行)設置到矩形里,后面通過交互對應的值就是12345的頁碼。

如果true列的值等于1,用設置選中的交互,設置頁碼矩形為選中狀態,因為前面設置了選中樣式,所以就會變色顯示。

如果前面主內容中繼器加載到最后一行之后,我們就要做一個添加行的操作,中繼器有幾頁我們就添加幾條數據在頁碼中繼器里。在這之前我們要先增加一個文本標簽作為觸發分頁的事件。

在載入時,我們通過pagecount的函數,記錄中繼器里面總共有多少頁。

然后在根據條件來判斷,這個條件判斷我們可以寫在觸發分頁元件鼠標單擊時。

如果當前文本記錄內容中繼器的頁數大于當前頁面中繼器的行數,我們可以用datacount獲取行數。這是我們就用添加行的交互,添加一行。然后在觸發該交互繼續循環。例如,主中繼里有5頁內容,我們就記錄數字5,因為一開始頁碼中繼器里1行都沒有,行數為0,我們就添加一行,行數就變成1,還是小于5,就繼續添加,一直添加到第五行。這樣就可以對應生成5個頁碼了。

這里需要注意的是,一般頁碼右邊都是有其他元件的,案例中有右箭頭和統計文字,所以我們還要用移動的交互,將右側的元件組合移動到頁面中繼器右側的位置。

然后我們在中繼器表格里加載到最后一行的時候,觸發分頁事件載入時就可以了,這樣每次中繼器表格數據發生改變,包括增加行、刪除行、搜索數據、篩選、重新分頁……都會相當于自動重新生成一次頁碼。

不過這里需要注意,因為后續操作在前面已經有頁碼了,所以我們要先做一個還原的操作,就是把頁面中繼器里所有行數據先刪除,然后在自動添加新的頁碼。

頁碼出來之后,我們要考慮的是當前哪個頁碼應該變色顯示,我們用pageindex的函數就可以獲取到主中繼器在第幾頁,因為頁碼中繼器我們在前面做了如果true值等于1,就選中變色,所以我們只需要用更新行的交互,將對應行true列的值更新為1即可。例如現在在第三頁的位置,我們就把頁碼中繼器第三行true值更新為1。

這里同樣需要考慮還原的問題,因為前面會先選中其他頁碼,所以我們可以在該操作前,先更新所有行的true值等于0,這樣就相當于全部取消選中,然后在更新對應行true列的值即可。

鼠標單擊頁碼時,我們用設置當前顯示頁面的交互,就可以將內容中繼器設置到對應的頁數了,這里我們也是用到index函數,因為index就是在第幾行,和頁碼是對應的。

3. 其他元件

到這里根據表格數據自動生成對應頁碼的模板已經做好了。剩下的一些元件,例如表頭、按鈕、分頁的上拉列表、左右翻頁箭頭、統計文字、搜索框、篩選的下拉列表、排序按鈕等都可以自己添加,如果不會這些基礎效果的話也可以看回我之前的視頻教程。

增加了增刪改查分頁的效果之后,預覽的時候也可以根據表格動態變化自動分頁的,因為我們邏輯已經寫好了,只要表格數據變動自動分頁,所以這個模板是非常實用的。

這樣我們就完成了根據表格數據自動生成頁碼的中繼器表格的原型模板了,后續使用也是很方便,默認的表格內容只需要在中繼器表格里維護,即可自動生成頁碼的交互效果,后續需要其他中繼器表效果(如增刪改查分頁翻頁統計排序等)的話也可以在原基礎上添加。

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

本文由 @AI產品人 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 工具玩的真溜,僅工具

    來自浙江 回復
  2. 單純好奇,什么樣類型的產品、什么樣類型的業務,才需要做高保真原型

    來自北京 回復
    1. 我咋真覺得時間花在這種地方有點浪費,這不是可以在交互說明里寫清楚的嗎

      來自陜西 回復