遇到一個項目,里面需要實現表格自動添加,點擊刪除,刪除行的功能;如下:初始進入查看,有兩條數據,點擊,紅框內的 + 號,自動增加一條數據,點擊數據中的 ,可以刪除對應行;
增加或刪除操作時,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的方式;這個目前親測有效哈;