在日常工作中，當(dāng)數(shù)據(jù)或信息過(guò)多時(shí)，我們可能會(huì)需要分頁(yè)顯示，這個(gè)時(shí)候，你要怎么實(shí)現(xiàn)根據(jù)表格數(shù)據(jù)自動(dòng)生成頁(yè)碼的效果？本篇文章里，作者便分享了如何在Axure中實(shí)現(xiàn)這一效果的方式。一起來(lái)看看作者的總結(jié)。

當(dāng)表格數(shù)據(jù)較多時(shí)，我們經(jīng)常會(huì)分頁(yè)顯示，這時(shí)我們就需要用到頁(yè)碼的元件了。所以作者今天就教大家如何在Axure中制作一個(gè)能自動(dòng)根據(jù)中繼器表格的數(shù)據(jù)以及分頁(yè)情況，自動(dòng)生成對(duì)應(yīng)頁(yè)碼的原型模板。

一、效果展示

1. 頁(yè)碼能根據(jù)表格數(shù)據(jù)和每頁(yè)顯示條數(shù)自動(dòng)生成。
2. 點(diǎn)擊頁(yè)碼可以跳轉(zhuǎn)至對(duì)應(yīng)的頁(yè)面。
3. 增加、刪除、搜索、篩選、分頁(yè)后自動(dòng)生成對(duì)應(yīng)的頁(yè)面。

二、制作教程

1. 中繼器表格的制作

這個(gè)比較簡(jiǎn)單，我們?cè)谥欣^器里添加矩形即可，有多少列就添加多少個(gè)矩形。

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

填寫好表格內(nèi)容后，在中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將每列的內(nèi)容設(shè)置到中繼器表格里對(duì)應(yīng)的矩形內(nèi)。

這樣中繼器表格內(nèi)容部分就完成了。

2. 頁(yè)碼的制作

這里頁(yè)碼我們也是用中繼器來(lái)制作，因?yàn)橹挥兄欣^器才能實(shí)現(xiàn)增減的動(dòng)態(tài)效果。

在中繼器里放入矩形元件，矩形要增加選中樣式，案例中是藍(lán)色，用于回顯當(dāng)前是在第幾頁(yè)。

中繼器表格里共兩列，一列（Column0列）是記錄頁(yè)數(shù)的，第二列（true列）是用來(lái)記錄哪列被選中的。兩列默認(rèn)為空即可，后面會(huì)通過(guò)交互讓頁(yè)碼自動(dòng)增加。

中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將index的值（就是第幾行）設(shè)置到矩形里，后面通過(guò)交互對(duì)應(yīng)的值就是12345的頁(yè)碼。

如果true列的值等于1，用設(shè)置選中的交互，設(shè)置頁(yè)碼矩形為選中狀態(tài)，因?yàn)榍懊嬖O(shè)置了選中樣式，所以就會(huì)變色顯示。

如果前面主內(nèi)容中繼器加載到最后一行之后，我們就要做一個(gè)添加行的操作，中繼器有幾頁(yè)我們就添加幾條數(shù)據(jù)在頁(yè)碼中繼器里。在這之前我們要先增加一個(gè)文本標(biāo)簽作為觸發(fā)分頁(yè)的事件。

在載入時(shí)，我們通過(guò)pagecount的函數(shù)，記錄中繼器里面總共有多少頁(yè)。

然后在根據(jù)條件來(lái)判斷，這個(gè)條件判斷我們可以寫在觸發(fā)分頁(yè)元件鼠標(biāo)單擊時(shí)。

如果當(dāng)前文本記錄內(nèi)容中繼器的頁(yè)數(shù)大于當(dāng)前頁(yè)面中繼器的行數(shù)，我們可以用datacount獲取行數(shù)。這是我們就用添加行的交互，添加一行。然后在觸發(fā)該交互繼續(xù)循環(huán)。例如，主中繼里有5頁(yè)內(nèi)容，我們就記錄數(shù)字5，因?yàn)橐婚_(kāi)始頁(yè)碼中繼器里1行都沒(méi)有，行數(shù)為0，我們就添加一行，行數(shù)就變成1，還是小于5，就繼續(xù)添加，一直添加到第五行。這樣就可以對(duì)應(yīng)生成5個(gè)頁(yè)碼了。

這里需要注意的是，一般頁(yè)碼右邊都是有其他元件的，案例中有右箭頭和統(tǒng)計(jì)文字，所以我們還要用移動(dòng)的交互，將右側(cè)的元件組合移動(dòng)到頁(yè)面中繼器右側(cè)的位置。

然后我們?cè)谥欣^器表格里加載到最后一行的時(shí)候，觸發(fā)分頁(yè)事件載入時(shí)就可以了，這樣每次中繼器表格數(shù)據(jù)發(fā)生改變，包括增加行、刪除行、搜索數(shù)據(jù)、篩選、重新分頁(yè)……都會(huì)相當(dāng)于自動(dòng)重新生成一次頁(yè)碼。

不過(guò)這里需要注意，因?yàn)楹罄m(xù)操作在前面已經(jīng)有頁(yè)碼了，所以我們要先做一個(gè)還原的操作，就是把頁(yè)面中繼器里所有行數(shù)據(jù)先刪除，然后在自動(dòng)添加新的頁(yè)碼。

頁(yè)碼出來(lái)之后，我們要考慮的是當(dāng)前哪個(gè)頁(yè)碼應(yīng)該變色顯示，我們用pageindex的函數(shù)就可以獲取到主中繼器在第幾頁(yè)，因?yàn)轫?yè)碼中繼器我們?cè)谇懊孀隽巳绻鹴rue值等于1，就選中變色，所以我們只需要用更新行的交互，將對(duì)應(yīng)行true列的值更新為1即可。例如現(xiàn)在在第三頁(yè)的位置，我們就把頁(yè)碼中繼器第三行true值更新為1。

這里同樣需要考慮還原的問(wèn)題，因?yàn)榍懊鏁?huì)先選中其他頁(yè)碼，所以我們可以在該操作前，先更新所有行的true值等于0，這樣就相當(dāng)于全部取消選中，然后在更新對(duì)應(yīng)行true列的值即可。

鼠標(biāo)單擊頁(yè)碼時(shí)，我們用設(shè)置當(dāng)前顯示頁(yè)面的交互，就可以將內(nèi)容中繼器設(shè)置到對(duì)應(yīng)的頁(yè)數(shù)了，這里我們也是用到index函數(shù)，因?yàn)閕ndex就是在第幾行，和頁(yè)碼是對(duì)應(yīng)的。

3. 其他元件

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

增加了增刪改查分頁(yè)的效果之后，預(yù)覽的時(shí)候也可以根據(jù)表格動(dòng)態(tài)變化自動(dòng)分頁(yè)的，因?yàn)槲覀冞壿嬕呀?jīng)寫好了，只要表格數(shù)據(jù)變動(dòng)自動(dòng)分頁(yè)，所以這個(gè)模板是非常實(shí)用的。

這樣我們就完成了根據(jù)表格數(shù)據(jù)自動(dòng)生成頁(yè)碼的中繼器表格的原型模板了，后續(xù)使用也是很方便，默認(rèn)的表格內(nèi)容只需要在中繼器表格里維護(hù)，即可自動(dòng)生成頁(yè)碼的交互效果，后續(xù)需要其他中繼器表效果（如增刪改查分頁(yè)翻頁(yè)統(tǒng)計(jì)排序等）的話也可以在原基礎(chǔ)上添加。

以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。