Axure中動態表格序號自增-中繼器應用


遇到一個項目,里面需要實現表格自動添加,點擊刪除,刪除行的功能;如下:初始進入查看,有兩條數據,點擊,紅框內的 + 號,自動增加一條數據,點擊數據中的 ,可以刪除對應行;

 

 

增加或刪除操作時,NO列,需要要求可自行增加或減少; 

在這里,中繼器就是最優選擇;

STEP1:首先建立一個表頭;可直接用文本輸入框實現,或者直接放一個單行的表格實現均可;

STEP2:拖入一個中繼器;

 

中繼器拖入后,默認為三行;雙擊進入中繼器,將輸入框復制為多個,因為我的表頭是10個字段+一個增加按鈕,所以一共是11個;

分別給中繼器中的每個格命個名,不然在后面做用例的時候,待選中會沒有格子可供設置;名字我就是給的11,22,33一直到1010;

 

 

 

這次項目中,需要體現輸入框,所以單獨做了一層動態面板,按照表格大小,做了一套對應的輸入框;這里是Axure中設置的樣子,生成之后網頁的樣子看文章里第一個圖;

STEP3,現在按照項目要求,先給幾行設定好的值來顯示;這個直接選中中繼器,右側屬性-中繼器表格中,進行設置;

由於中繼器中的格子11,22,33,----1010,需要給對應的值,所以,這里在右側屬性的中繼器表格中,需要給列命名,用來做格子內容的對應;

 

到現在位置,表格的樣子設置好了,表格的列設置好了,命名做好了,中繼器中列命名做好了,中繼器中列表顯示的內容設置好了,現在開始添加用例;

STEP4:首先,用例需要實現的功能包括:中繼器表中的內容顯示對應,單行刪除,逐行增加,逐行增加時NO列數字自增;

第一個:中繼器表中顯示內容對應;

中繼器表設置好后,每個格子都是空的,顯示內容,在中繼器屬性中做了設置;現在要把它們對應起來;

選中中繼器,添加用例(只有中繼器的用例,有‘每項加載時’這個用例;)

這里有一個特殊的地方,因為NO11列是要實現格子11中顯示數字自增的效果,所以這里11格子設置的時候,【設置文本】這里的下拉選擇‘值’,設置為取index的值;操作如下,點擊‘fx’,彈出框中,插入變量或函數這里,下拉選擇index,則生成[[Item.index]],

 

其他格子展示的內容,則操作步驟如下幾個圖;在編輯文本彈出框中,輸入:[[Item.name22]],意思就是22這個格子取值的時候,去中繼器屬性表的name22列取值;

 

 

 

 

 

 

 

 

按照這個步驟,把所有的格子的對應內容都設置完;最終用例如下:

截止到這里,中繼器顯示的部分就設置完了;每個格子內顯示那些內容設置完畢;

第二個單行刪除

單行刪除,效果直接坐在中繼器里面,最后一個格子上里額圖標上的;這里有綠色,是因為我沒有直接坐在圖標上,而是加了熱區;

 

增加的用例是,鼠標單擊這個區域圖標時,則刪除這行數據;

 

 

第三個:逐行增加

逐行添加的效果用例添加,需要做在表頭的 + 號圖標上;

 

這里要實現的是,每點擊一次 + 號,中繼器中表格增加一行,且NO列數字逐行增加;

a:中繼器自帶的添加行動作,添加行,選中中繼器對象,默認add為0,需要將add后的數據增添為1,則點擊【添加行】按鈕,彈出的“添加行到中繼器彈窗”中,設置內容,首先先增加一行,這里實際上如果對不實現數字自增功能,就已經設置完成了;

現在繼續設置數據自增加,這里就需要設置: fx函數來實現了;

 

 

NO列,點擊fx,彈出的變量設置頁面中,

點擊fx后,彈出的編輯值彈窗中,首先局部變量中,添加一個局部變量,LVAR1,是系統默認給的一個局部變量名稱,選擇“”“元件”,對象選擇自己的這個中繼器,這里的意思是,這變量是這個名叫‘信息欄1’的中繼器元件的;

然后輸入變量和函數中,選擇這個變量;

 

添加之后,內容如下:

,這個時候,需要設置一下:我是自己手動輸入的; [[LVAR1.itemCount+1]],itemCount,這個是計算中繼器行的總數,因為我們是要新增一行,所以是itemCount+1,

這里可以理解為,名字是信息欄1這個中繼器,他的局部變量LVAR1,計算他行的數量,並且+1,當添加行的時候,這里就顯示這個數值;

 

逐級確定后,則動態增加行,且NO列序號數字自動增加也設置完成;

所有的設置做完后,就完成了一個表格的動態添加,點+號,增加一行,點圖標 -- 號,刪除對應行,且序號自動增加;

 

中繼器的應用真的是很多,我也只是在項目過程中進行學習;

之前看到一種自增加的方式,當時的確是生效了,也記錄了,但是這次再看,始終不明白是什么意思,並且也再也實現不了了,所以這次學習了這種方式;設置原理也是明白的;所以修改之后,重新放了上來;

之前的方式,是這種:中繼器中   [[Item.列名]]  的用途:獲取數據行中指定列的值。是不是可以理解為列的個數,NO列取值為個數,所以達到了序號增加的目的;這個后續還會繼續嘗試,如果確切的理解了之后,也會更新上來;

這次用到的是itemCount的方式;這個目前親測有效哈;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM