這篇文章是對(duì)后臺(tái)原型的增刪改查選顯6個(gè)功能講解的最后一篇文章了，其他三篇可以查看《axure8.0快速入門新手教程：全選反選》、《axure8.0快速入門新手教程：添加刪除》和《axure8.0快速入門新手教程：修改查詢》。這里的排序和分頁(yè)主要是屬于顯示這一功能上的，當(dāng)數(shù)據(jù)量特別多的時(shí)候，排序和分頁(yè)甚至是不可或缺的，這里就講講如何制作排序和分頁(yè)的原型。

第一步：拖拉擺放好相關(guān)控件

1、數(shù)據(jù)表格（表頭）：1行4列，灰底黑框的表格作為表頭，從左到右每個(gè)格子的文字分別為：姓名、性別、年齡、電話，字體全部加粗，并且在年齡旁邊放一個(gè)白色的倒三角形，命名為“三角形”；

2、數(shù)據(jù)表格（表身）：一個(gè)中繼器，中繼器里面是一個(gè)1行4列，白底黑框的表格，從左到右4個(gè)格子分別命名為“姓名”、“性別”、“年齡”、“電話”。

3、分頁(yè)：5個(gè)黑框白底的矩形，文字分別為：首頁(yè)、1、2、3、末頁(yè)。

第二步：為中繼器設(shè)置數(shù)據(jù)庫(kù)和交互用例

中繼器中的數(shù)據(jù)庫(kù)設(shè)置如下：

為中繼器添加每項(xiàng)加載時(shí)用例

用例中設(shè)置“姓名”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫(kù)的“name”列；

用例中設(shè)置“性別”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫(kù)的“sex”列；

用例中設(shè)置“年齡”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫(kù)的“age”列；

用例中設(shè)置“電話”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫(kù)的“tel”列。

第三步：為年齡按鈕設(shè)置鼠標(biāo)單擊時(shí)交互用例

1、為中繼器添加排序，屬性為age，排序類型為Number，順序?yàn)榍袚Q，默認(rèn)為升序。

2、相對(duì)旋轉(zhuǎn)“三角形”180度，方向?yàn)轫槙r(shí)針，錨點(diǎn)為中心。

第四步：為5個(gè)分頁(yè)按鈕設(shè)置鼠標(biāo)單擊時(shí)用例

例如首頁(yè)按鈕，鼠標(biāo)單擊時(shí)設(shè)置中繼器當(dāng)前頁(yè)面value值為1，而1頁(yè)、2頁(yè)、3頁(yè)和末頁(yè)四個(gè)按鈕分別設(shè)置中繼器當(dāng)前頁(yè)面value值為1、value值為2、value值為3和Last。

點(diǎn)擊預(yù)覽，然后“年齡按鈕”或者“點(diǎn)擊分頁(yè)按鈕”，就可以看到排序分頁(yè)的效果了。同時(shí)也可以隨時(shí)關(guān)注我的個(gè)人博客：http://niubipm.cn，因?yàn)楣ぷ鬟^(guò)程中有很多這些axure原型設(shè)計(jì)小技巧的例子，所以我會(huì)堅(jiān)持分享下去，希望對(duì)大家有幫助，你們對(duì)我的關(guān)注就是我的動(dòng)力。

效果圖：axure原型設(shè)計(jì)之排序分頁(yè)

更多原型案例：http://niubipm.cn

作者：牛B產(chǎn)品經(jīng)理

轉(zhuǎn)載請(qǐng)注明出處：http://niubipm.cn/a/chanpinsheji/Axure/2018/0505/181.html