Axure怎制作表格升序或降序效果?

Axure想要制作一個(gè)表格內(nèi)容修改排序效果,上下行的交換,該怎么這個(gè)交互效果呢?下面我們就來(lái)看看詳細(xì)的教程。

Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊(cè)機(jī)+漢化包+安裝教程)
- 類型:輔助設(shè)計(jì)
- 大?。?/span>83.2MB
- 語(yǔ)言:簡(jiǎn)體中文
- 時(shí)間:2019-04-26
新建一個(gè)“中繼器”,如下圖所示:
“中繼器”設(shè)置2列:ID、content;可按所需設(shè)置行內(nèi)容; (ID是用來(lái)排序的,建議按數(shù)字順序設(shè)置),可參考下圖設(shè)置:
雙擊進(jìn)入“中繼器”內(nèi)部,先清除原來(lái)內(nèi)容;新建2個(gè)“文本標(biāo)簽”、1個(gè)“矩形”、1個(gè)“向上箭頭”的圖標(biāo)、1個(gè)“向下箭頭”的圖標(biāo);如下圖所示:
設(shè)置一個(gè)“文本標(biāo)簽”為Num;
設(shè)置一個(gè)“文本標(biāo)簽”為content;
設(shè)置"矩形"尺寸:280*60;填充色:#CCCCCC
布局如下圖所示:
到這里,基礎(chǔ)的布局設(shè)置結(jié)束,以下是交互設(shè)置~
首先是“中繼器”的“每項(xiàng)加載時(shí)”的交互:
動(dòng)作:
設(shè)置“文本標(biāo)簽:Num”的值:[[Item.index]]
設(shè)置“文本標(biāo)簽:content”的值:[[Item.content]]
如下圖所示:
”圖標(biāo):向上箭頭“的”鼠標(biāo)單擊時(shí)“的交互:
條件:當(dāng)”值:[[Item.ID]]“大于1時(shí),如下圖所示:
動(dòng)作1:更新行:設(shè)置上一行的ID為本行ID)
更新條件:[[TargetItem.ID==Item.ID-1]]
更新”ID“列內(nèi)容:[[Item.ID]]
如下圖所示:
動(dòng)作2:更新行:設(shè)置本行的ID,數(shù)值減1
更新條件:this(即本身)
更新”ID“列內(nèi)容:[[Item.ID-1]]
如下圖所示:
動(dòng)作3:排序
針對(duì)”屬性:ID“排序;排序類型:Number;順序:升序;如下圖所示:
幾乎相同方式,設(shè)置”圖標(biāo):向下箭頭“的”鼠標(biāo)單擊時(shí)“的交互:
條件:當(dāng)”值:[[Item.ID]]“小于”[[Item.Repeater.itemCount]]“時(shí),如下圖所示:
動(dòng)作1:更新行:設(shè)置下一行的ID為本行ID)
更新條件:[[TargetItem.ID==Item.ID+1]]
更新”ID“列內(nèi)容:[[Item.ID]]
如下圖所示:
動(dòng)作2:更新行:設(shè)置本行的ID,數(shù)值加1,
更新條件:this(即本身)
更新”ID“列內(nèi)容:[[Item.ID+1]]
如下圖所示:
動(dòng)作3:排序
針對(duì)”屬性:ID“排序;排序類型:Number;順序:升序;如下圖所示:
設(shè)置內(nèi)容還是比較少的,有些撓腦筋,需要仔細(xì)些即可,設(shè)置完畢后,就可以驗(yàn)證效果如何~
以上就是axure制作表格內(nèi)容升降序列的教程,希望大家喜歡,請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
Axure怎么設(shè)計(jì)網(wǎng)頁(yè)強(qiáng)密碼驗(yàn)證效果?
Axure怎么制作百分比的進(jìn)度條動(dòng)畫?
Axure怎么制作控件隨鼠標(biāo)移動(dòng)的效果?
相關(guān)文章
axure怎么設(shè)計(jì)一個(gè)倒計(jì)時(shí)效果的模型?
axure怎么設(shè)計(jì)一個(gè)倒計(jì)時(shí)效果的模型?axure中設(shè)計(jì)網(wǎng)頁(yè)圓形很簡(jiǎn)單,今天我們就來(lái)看看使用axure設(shè)置一個(gè)倒計(jì)時(shí)效果的教程,需要的朋友可以參考下2017-09-28axure網(wǎng)頁(yè)原型怎么預(yù)覽和生成原型文件?
axure網(wǎng)頁(yè)原型怎么預(yù)覽和生成原型文件?axure中設(shè)計(jì)好的文件原型想要預(yù)覽并生成,該怎么預(yù)覽呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-09-25axure原型無(wú)法簽出怎么辦? axure不能簽出的解決辦法
axure原型無(wú)法簽出怎么辦、?axure中設(shè)計(jì)網(wǎng)頁(yè)原型很方便,設(shè)計(jì)完成以后發(fā)現(xiàn)無(wú)法簽出,該怎么辦呢?下面我們就來(lái)看看axure不能簽出的解決辦法,需要的朋友可以參考下2017-09-24Axure怎么新建元件庫(kù)? Axure元件庫(kù)的使用方法
Axure怎么新建元件庫(kù)?想要把常用的組件制作一個(gè)元件,放到自己的元件庫(kù)中,該怎么操作呢?下面我們就來(lái)看看Axure元件庫(kù)的使用方法,需要的朋友可以參考下2017-09-13- axure中的單元格怎么合并?axure制作的網(wǎng)頁(yè)原型中插入了表格,想要將表格中的單元格合并呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-09-08
axure8怎么給網(wǎng)頁(yè)制作Tabpage頁(yè)效果?
axure8怎么給網(wǎng)頁(yè)制作Tabpage頁(yè)效果?axure8中想要給網(wǎng)頁(yè)設(shè)計(jì)一個(gè)tab標(biāo)簽效果,該怎么設(shè)計(jì)呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-08-29Axure RP8怎么設(shè)計(jì)倒計(jì)時(shí)獲取短信驗(yàn)證碼效果?
Axure RP8怎么設(shè)計(jì)倒計(jì)時(shí)獲取短信驗(yàn)證碼效果?經(jīng)常能見到帶有短信驗(yàn)證的網(wǎng)頁(yè),該怎么設(shè)計(jì)出這個(gè)交互效果呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-08-25Axure RP怎么給網(wǎng)頁(yè)添加滾動(dòng)字幕?
Axure RP怎么給網(wǎng)頁(yè)添加滾動(dòng)字幕?看到很多網(wǎng)頁(yè)有滾動(dòng)字幕,想要在Axure RP中制作滾動(dòng)字幕效果,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-08-15Axure RP怎么設(shè)計(jì)一款導(dǎo)航菜單?
Axure RP怎么設(shè)計(jì)一款導(dǎo)航菜單?Axure RP中設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候需要設(shè)計(jì)一款導(dǎo)航菜單,該怎么設(shè)計(jì)恩?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-08-11axure怎么給下拉框/列表框和元件文本添加內(nèi)容?
axure怎么給下拉框/列表框和元件文本添加內(nèi)容?axure中有很多元件,今天我們就來(lái)看看給下拉框/列表框和元件文本添加內(nèi)容的方法,需要的朋友可以參考下2017-07-25