Axure中繼器基礎教程(增行、刪當前、標記、全部、規則行) Mark

一、中繼器的新增行

中繼器所顯示的列表項與中繼器的數據集有關,默認情況下是一一對應的。也就是說,中繼器數據集中有多少行數據,那麼,列表項就有多少個。

r21

那麼,我們能不能通過新增數據行來增加列表項呢?

可以的。我們可以通過動作對中繼器進行新增行的操作。

下面就以向默認狀態下的中繼器新增行舉例,我們將一個文本框(命名爲”Ipt”)和一個“新增”按鈕放到編輯區。生成後的效果要求:點擊“新增”按鈕時,將文本框中輸入的內容添加到中繼器(命名爲”Rpt”),顯示出新的列表項。

具體實現步驟如下:

r22

1、選中“新增”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>新增行;

3、在用例編輯器右側,勾選要新增行的中繼器;

4、點擊“新增行”的按鈕;(箭頭指向的位置,被Fx的編輯框遮擋住了)

5、可以直接輸入要新增的值,但是,因爲我們是要將文本框的值添加到中繼器,所以,這裏我們點擊“Fx”;

6、新增局部變量,並命名爲”Ipt”,設置“Ipt”=文本框”Ipt”的元件文字;

7、點擊變量函數列表,選擇局部變量”Ipt”或者直接在編輯區輸入[[Ipt]]。

8、通過“確定”每一個對話框,回到主窗口,完成編輯。

9、點擊預覽,或者生成Html文件(方法:發佈-更多生成配置-HTML1文件—不在瀏覽器中打開,選擇放入的文件夾-生成 。瀏覽器選擇谷歌最好),並在瀏覽器中打開,查看效果。

r230

二、中繼器的刪除行

是這樣的,刪除和新增不一樣,因爲刪除,有很多種不同的方式,比如:

  • 刪除當前行;
  • 刪除全部;
  • 刪除標記行;
  • 通過設置規則,刪除滿足條件的的行。

A刪除當前行

首先,我們先來看怎麼刪除當前行。顧名思義,每一項要對應一個刪除按鈕。所以,我們要在中繼器中添加一個“刪除”按鈕,通過點擊“刪除”按鈕,來實現刪除數據集中的數據。(注意:點擊中繼器界面,再放入刪除按鈕,在進行編輯,就會有“This”了)

r23

然後,在點擊這個“刪除“按鈕的時候,我們要刪除當前的一行。步驟如下:

r24

1、選中“刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>刪除行;

3、在用例編輯器右側,勾選要刪除行的中繼器;

4、選中“This“;

5、通過“確定”每一個對話框,回到主窗口,完成編輯。

6、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。

r25

 

B 全部刪除

首先,要刪除中繼器的全部內容,我們還是通過一個刪除按鈕來實現。

我們在主頁(不是中繼器的主頁哦)放一個圓角矩形當刪除按鈕。當點擊這個刪除按鈕的時候,刪除掉中繼器中所有的內容。

r31

接下來,我們在點擊這個“刪除全部”按鈕的鼠標點擊時事件中添加用例!步驟如下:

r33

1、選中“全部刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>刪除行;

3、在用例編輯器右側,勾選要刪除行的中繼器;

4、勾選”規則“;(當前版本沒有“全部“的選項,所以需要通過規則來刪除全部)

5、規則中寫入[[1==1]]或者true即可達到效果;

6、通過“確定”每一個對話框,回到主窗口,完成編輯。

7、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。

r34

 

C刪除標記行

如果要刪除標記行,當然要先標記後刪除。那麼怎麼標記呢?

我們再放一個刪除按鈕,到我們的案例裏面。這個按鈕的文字是”刪除已標記”。

假設,我們點擊中繼器中任意一行的之後,點擊“刪除已標記“這個按鈕,就能把我們點擊過得一項刪除。

這個效果的實現步驟如下:

一、先進行標記

r35

1、選中中繼器中用於顯示文字的矩形,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>標記行;

3、在用例編輯器右側,勾選要添加標記行的中繼器;

4、勾選”this“;(這樣就標記了當前的數據行)

思考題:如果這裏選擇全部或者規則呢?

二、再執行刪除

“刪除已標記“的刪除動作參考”刪除全部“的截圖,具體步驟如下:

1、選中“刪除已標記”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>刪除行;

3、在用例編輯器右側,勾選要刪除行的中繼器;

4、勾選”已標記“;

5、通過“確定”每一個對話框,回到主窗口,完成編輯。

6、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。

r36

 

 

D通過設置規則,刪除滿足條件的的行。

下面我們來看如何根據規則,刪除中繼器中指定的內容。

案例效果:刪除中繼器中顯示的文字內容與輸入內容相同的行。

首先呢,我們還是添加一些元件來幫助我們實現效果,在主頁中我們添加一個文本輸入框,取名叫”Ipt2”,再添加一個刪除按鈕。

r41

然後,按照下列步驟,完成按規則刪除行。

r42

1、選中“刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>刪除行;

3、在用例編輯器右側,勾選要刪除行的中繼器;

4、勾選”規則“;

5、“規則”輸入框的右側有個fx,點擊打開編輯框;

6、新建一個局部變量“ipt2”來獲取,文本輸入框“ipt2”中輸入的文字;

7、點擊打開“變量與函數列表”,選擇中繼器的屬性”TargetItem.column0”和局部變量“ipt2”並用布爾“==”進行連接。[[TargetItem.Column0==ipt2]]

r43

8、通過“確定”每一個對話框,回到主窗口,完成編輯。

9、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。

r44

這裏我們只是通過一種場景的模擬,來講述通過規則刪除中繼器某一行的操作。其實,我們能通過規則來實現很多刪除的效果。比如,我們之前講過的刪除全部。

思考:

能不能刪除包含中文的行呢?

能不能刪除第6行至第9行呢?

能不能刪除單數行或雙數行呢?

能不能刪除前10行呢?

能不能刪除沒有被標記的行呢?

答案:都可以。只要我們結合不同的函數、屬性等等,通過書寫不同的規則,基本上各種能夠想到的刪除效果我們都能實現。當然,這些是建立在對函數、屬性等知識非常熟悉的基礎上。

中繼器的應用部分案例:

http://www.iaxure.com/share/jddemo/

http://www.iaxure.com/share/bank/

http://www.iaxure.com/share/tabp/

http://www.iaxure.com/share/jhwz/

你能看出哪裏使用了中繼器嗎?

 

原帖:http://www.iaxure.com/1858.html

---恢復內容結束---

一、中繼器的新增行

中繼器所顯示的列表項與中繼器的數據集有關,默認情況下是一一對應的。也就是說,中繼器數據集中有多少行數據,那麼,列表項就有多少個。

r21

那麼,我們能不能通過新增數據行來增加列表項呢?

可以的。我們可以通過動作對中繼器進行新增行的操作。

下面就以向默認狀態下的中繼器新增行舉例,我們將一個文本框(命名爲”Ipt”)和一個“新增”按鈕放到編輯區。生成後的效果要求:點擊“新增”按鈕時,將文本框中輸入的內容添加到中繼器(命名爲”Rpt”),顯示出新的列表項。

具體實現步驟如下:

r22

1、選中“新增”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>新增行;

3、在用例編輯器右側,勾選要新增行的中繼器;

4、點擊“新增行”的按鈕;(箭頭指向的位置,被Fx的編輯框遮擋住了)

5、可以直接輸入要新增的值,但是,因爲我們是要將文本框的值添加到中繼器,所以,這裏我們點擊“Fx”;

6、新增局部變量,並命名爲”Ipt”,設置“Ipt”=文本框”Ipt”的元件文字;

7、點擊變量函數列表,選擇局部變量”Ipt”或者直接在編輯區輸入[[Ipt]]。

8、通過“確定”每一個對話框,回到主窗口,完成編輯。

9、點擊預覽,或者生成Html文件(方法:發佈-更多生成配置-HTML1文件—不在瀏覽器中打開,選擇放入的文件夾-生成 。瀏覽器選擇谷歌最好),並在瀏覽器中打開,查看效果。

r230

二、中繼器的刪除行

是這樣的,刪除和新增不一樣,因爲刪除,有很多種不同的方式,比如:

  • 刪除當前行;
  • 刪除全部;
  • 刪除標記行;
  • 通過設置規則,刪除滿足條件的的行。

A刪除當前行

首先,我們先來看怎麼刪除當前行。顧名思義,每一項要對應一個刪除按鈕。所以,我們要在中繼器中添加一個“刪除”按鈕,通過點擊“刪除”按鈕,來實現刪除數據集中的數據。(注意:點擊中繼器界面,再放入刪除按鈕,在進行編輯,就會有“This”了)

r23

然後,在點擊這個“刪除“按鈕的時候,我們要刪除當前的一行。步驟如下:

r24

1、選中“刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>刪除行;

3、在用例編輯器右側,勾選要刪除行的中繼器;

4、選中“This“;

5、通過“確定”每一個對話框,回到主窗口,完成編輯。

6、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。

r25

 

B 全部刪除

首先,要刪除中繼器的全部內容,我們還是通過一個刪除按鈕來實現。

我們在主頁(不是中繼器的主頁哦)放一個圓角矩形當刪除按鈕。當點擊這個刪除按鈕的時候,刪除掉中繼器中所有的內容。

r31

接下來,我們在點擊這個“刪除全部”按鈕的鼠標點擊時事件中添加用例!步驟如下:

r33

1、選中“全部刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>刪除行;

3、在用例編輯器右側,勾選要刪除行的中繼器;

4、勾選”規則“;(當前版本沒有“全部“的選項,所以需要通過規則來刪除全部)

5、規則中寫入[[1==1]]或者true即可達到效果;

6、通過“確定”每一個對話框,回到主窗口,完成編輯。

7、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。

r34

 

C刪除標記行

如果要刪除標記行,當然要先標記後刪除。那麼怎麼標記呢?

我們再放一個刪除按鈕,到我們的案例裏面。這個按鈕的文字是”刪除已標記”。

假設,我們點擊中繼器中任意一行的之後,點擊“刪除已標記“這個按鈕,就能把我們點擊過得一項刪除。

這個效果的實現步驟如下:

一、先進行標記

r35

1、選中中繼器中用於顯示文字的矩形,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>標記行;

3、在用例編輯器右側,勾選要添加標記行的中繼器;

4、勾選”this“;(這樣就標記了當前的數據行)

思考題:如果這裏選擇全部或者規則呢?

二、再執行刪除

“刪除已標記“的刪除動作參考”刪除全部“的截圖,具體步驟如下:

1、選中“刪除已標記”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>刪除行;

3、在用例編輯器右側,勾選要刪除行的中繼器;

4、勾選”已標記“;

5、通過“確定”每一個對話框,回到主窗口,完成編輯。

6、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。

r36

 

 

D通過設置規則,刪除滿足條件的的行。

下面我們來看如何根據規則,刪除中繼器中指定的內容。

案例效果:刪除中繼器中顯示的文字內容與輸入內容相同的行。

首先呢,我們還是添加一些元件來幫助我們實現效果,在主頁中我們添加一個文本輸入框,取名叫”Ipt2”,再添加一個刪除按鈕。

r41

然後,按照下列步驟,完成按規則刪除行。

r42

1、選中“刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;

2、點擊動作列表中:中繼器>數據集>刪除行;

3、在用例編輯器右側,勾選要刪除行的中繼器;

4、勾選”規則“;

5、“規則”輸入框的右側有個fx,點擊打開編輯框;

6、新建一個局部變量“ipt2”來獲取,文本輸入框“ipt2”中輸入的文字;

7、點擊打開“變量與函數列表”,選擇中繼器的屬性”TargetItem.column0”和局部變量“ipt2”並用布爾“==”進行連接。[[TargetItem.Column0==ipt2]]

r43

8、通過“確定”每一個對話框,回到主窗口,完成編輯。

9、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。

r44

這裏我們只是通過一種場景的模擬,來講述通過規則刪除中繼器某一行的操作。其實,我們能通過規則來實現很多刪除的效果。比如,我們之前講過的刪除全部。

思考:

能不能刪除包含中文的行呢?

能不能刪除第6行至第9行呢?

能不能刪除單數行或雙數行呢?

能不能刪除前10行呢?

能不能刪除沒有被標記的行呢?

答案:都可以。只要我們結合不同的函數、屬性等等,通過書寫不同的規則,基本上各種能夠想到的刪除效果我們都能實現。當然,這些是建立在對函數、屬性等知識非常熟悉的基礎上。

中繼器的應用部分案例:

http://www.iaxure.com/share/jddemo/

http://www.iaxure.com/share/bank/

http://www.iaxure.com/share/tabp/

http://www.iaxure.com/share/jhwz/

你能看出哪裏使用了中繼器嗎?

 

這一節,我們來講一下如何對中繼器的數據進行修改。

中繼器數據的修改,也有幾種不同的方式,比如:

l  修改當前行;

l  修改標記行;

l  修改滿足條件的行。

這裏,我們先了解一下如何修改當前行。

修改當前行的話,我們需要把觸發修改動作的元件放到中繼器裏面,在這個案例中,我在中繼器主頁中添加了一個文本(Lable)作爲觸發修改動作的按鈕。同時,添加了一個文本框用來輸入內容,並設置爲隱藏。然後,在中繼器數據集(在Rpt頁面中,直接點擊新增行就可以了)中多添加幾行,以方便演示。

u1

我們將實現的效果是:

1、點擊文本(“編輯”)的時候,顯示文本框,文本框中顯示舊的數據,並獲取焦點。

2、同時,文本的文字從“編輯”變成”保存”;

3、當完成文本框內容編輯,點擊文本(“保存”)時,當前行數據被更改。

實現步驟如下:

首先,我們需要對文本(Lable)的文字進行判斷,如果它的文字是“編輯”,那麼點擊時,我們完成以下動作:

>>設置文本框的元件文字爲當前數據行“neirong”列的值;

>>設置顯示文本框;

>>設置文本框獲取焦點;

>>設置文本(Lable)的文字爲“保存”。

如果,它的文字是“保存”,那麼點擊時,我們對中繼器的數據進行修改:

u2

1、點擊動作列表中:中繼器>數據集>更新行;

2、在用例編輯器右側,勾選要更新行的中繼器;

3、勾選”this“,即對當前行數據進行修改;

4、選擇要修改數據的列名,當前中繼器數據集只有一列”neirong”,我們選擇它,對他進行修改;如果數據集有多列,並且多列需要修改時,我們在這裏則需要將所有要修改的列名都進行選擇;

5、鍵入新的列值;這裏我們需要把文本框輸入的文字作爲新的列值保存,所以需要點擊“fx”,進行6、7兩步操作;

6、新增局部變量,獲取文本框輸入的文字;

7、點擊打開“變量與函數列表”,選擇局部變量,或者直接鍵入[[局部變量名稱]],完成新列值的編輯。

8、通過“確定”每一個對話框,回到主窗口,完成編輯。

9、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。

u3

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章