一、中繼器的新增行
中繼器所顯示的列表項與中繼器的數據集有關,默認情況下是一一對應的。也就是說,中繼器數據集中有多少行數據,那麼,列表項就有多少個。
那麼,我們能不能通過新增數據行來增加列表項呢?
可以的。我們可以通過動作對中繼器進行新增行的操作。
下面就以向默認狀態下的中繼器新增行舉例,我們將一個文本框(命名爲”Ipt”)和一個“新增”按鈕放到編輯區。生成後的效果要求:點擊“新增”按鈕時,將文本框中輸入的內容添加到中繼器(命名爲”Rpt”),顯示出新的列表項。
具體實現步驟如下:
1、選中“新增”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>新增行;
3、在用例編輯器右側,勾選要新增行的中繼器;
4、點擊“新增行”的按鈕;(箭頭指向的位置,被Fx的編輯框遮擋住了)
5、可以直接輸入要新增的值,但是,因爲我們是要將文本框的值添加到中繼器,所以,這裏我們點擊“Fx”;
6、新增局部變量,並命名爲”Ipt”,設置“Ipt”=文本框”Ipt”的元件文字;
7、點擊變量函數列表,選擇局部變量”Ipt”或者直接在編輯區輸入[[Ipt]]。
8、通過“確定”每一個對話框,回到主窗口,完成編輯。
9、點擊預覽,或者生成Html文件(方法:發佈-更多生成配置-HTML1文件—不在瀏覽器中打開,選擇放入的文件夾-生成 。瀏覽器選擇谷歌最好),並在瀏覽器中打開,查看效果。
二、中繼器的刪除行
是這樣的,刪除和新增不一樣,因爲刪除,有很多種不同的方式,比如:
- 刪除當前行;
- 刪除全部;
- 刪除標記行;
- 通過設置規則,刪除滿足條件的的行。
A刪除當前行
首先,我們先來看怎麼刪除當前行。顧名思義,每一項要對應一個刪除按鈕。所以,我們要在中繼器中添加一個“刪除”按鈕,通過點擊“刪除”按鈕,來實現刪除數據集中的數據。(注意:點擊中繼器界面,再放入刪除按鈕,在進行編輯,就會有“This”了)
然後,在點擊這個“刪除“按鈕的時候,我們要刪除當前的一行。步驟如下:
1、選中“刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>刪除行;
3、在用例編輯器右側,勾選要刪除行的中繼器;
4、選中“This“;
5、通過“確定”每一個對話框,回到主窗口,完成編輯。
6、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。
B 全部刪除
首先,要刪除中繼器的全部內容,我們還是通過一個刪除按鈕來實現。
我們在主頁(不是中繼器的主頁哦)放一個圓角矩形當刪除按鈕。當點擊這個刪除按鈕的時候,刪除掉中繼器中所有的內容。
接下來,我們在點擊這個“刪除全部”按鈕的鼠標點擊時事件中添加用例!步驟如下:
1、選中“全部刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>刪除行;
3、在用例編輯器右側,勾選要刪除行的中繼器;
4、勾選”規則“;(當前版本沒有“全部“的選項,所以需要通過規則來刪除全部)
5、規則中寫入[[1==1]]或者true即可達到效果;
6、通過“確定”每一個對話框,回到主窗口,完成編輯。
7、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。
C刪除標記行
如果要刪除標記行,當然要先標記後刪除。那麼怎麼標記呢?
我們再放一個刪除按鈕,到我們的案例裏面。這個按鈕的文字是”刪除已標記”。
假設,我們點擊中繼器中任意一行的之後,點擊“刪除已標記“這個按鈕,就能把我們點擊過得一項刪除。
這個效果的實現步驟如下:
一、先進行標記
1、選中中繼器中用於顯示文字的矩形,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>標記行;
3、在用例編輯器右側,勾選要添加標記行的中繼器;
4、勾選”this“;(這樣就標記了當前的數據行)
思考題:如果這裏選擇全部或者規則呢?
二、再執行刪除
“刪除已標記“的刪除動作參考”刪除全部“的截圖,具體步驟如下:
1、選中“刪除已標記”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>刪除行;
3、在用例編輯器右側,勾選要刪除行的中繼器;
4、勾選”已標記“;
5、通過“確定”每一個對話框,回到主窗口,完成編輯。
6、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。
D通過設置規則,刪除滿足條件的的行。
下面我們來看如何根據規則,刪除中繼器中指定的內容。
案例效果:刪除中繼器中顯示的文字內容與輸入內容相同的行。
首先呢,我們還是添加一些元件來幫助我們實現效果,在主頁中我們添加一個文本輸入框,取名叫”Ipt2”,再添加一個刪除按鈕。
然後,按照下列步驟,完成按規則刪除行。
1、選中“刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>刪除行;
3、在用例編輯器右側,勾選要刪除行的中繼器;
4、勾選”規則“;
5、“規則”輸入框的右側有個fx,點擊打開編輯框;
6、新建一個局部變量“ipt2”來獲取,文本輸入框“ipt2”中輸入的文字;
7、點擊打開“變量與函數列表”,選擇中繼器的屬性”TargetItem.column0”和局部變量“ipt2”並用布爾“==”進行連接。[[TargetItem.Column0==ipt2]]
8、通過“確定”每一個對話框,回到主窗口,完成編輯。
9、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。
這裏我們只是通過一種場景的模擬,來講述通過規則刪除中繼器某一行的操作。其實,我們能通過規則來實現很多刪除的效果。比如,我們之前講過的刪除全部。
思考:
能不能刪除包含中文的行呢?
能不能刪除第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
---恢復內容結束---
一、中繼器的新增行
中繼器所顯示的列表項與中繼器的數據集有關,默認情況下是一一對應的。也就是說,中繼器數據集中有多少行數據,那麼,列表項就有多少個。
那麼,我們能不能通過新增數據行來增加列表項呢?
可以的。我們可以通過動作對中繼器進行新增行的操作。
下面就以向默認狀態下的中繼器新增行舉例,我們將一個文本框(命名爲”Ipt”)和一個“新增”按鈕放到編輯區。生成後的效果要求:點擊“新增”按鈕時,將文本框中輸入的內容添加到中繼器(命名爲”Rpt”),顯示出新的列表項。
具體實現步驟如下:
1、選中“新增”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>新增行;
3、在用例編輯器右側,勾選要新增行的中繼器;
4、點擊“新增行”的按鈕;(箭頭指向的位置,被Fx的編輯框遮擋住了)
5、可以直接輸入要新增的值,但是,因爲我們是要將文本框的值添加到中繼器,所以,這裏我們點擊“Fx”;
6、新增局部變量,並命名爲”Ipt”,設置“Ipt”=文本框”Ipt”的元件文字;
7、點擊變量函數列表,選擇局部變量”Ipt”或者直接在編輯區輸入[[Ipt]]。
8、通過“確定”每一個對話框,回到主窗口,完成編輯。
9、點擊預覽,或者生成Html文件(方法:發佈-更多生成配置-HTML1文件—不在瀏覽器中打開,選擇放入的文件夾-生成 。瀏覽器選擇谷歌最好),並在瀏覽器中打開,查看效果。
二、中繼器的刪除行
是這樣的,刪除和新增不一樣,因爲刪除,有很多種不同的方式,比如:
- 刪除當前行;
- 刪除全部;
- 刪除標記行;
- 通過設置規則,刪除滿足條件的的行。
A刪除當前行
首先,我們先來看怎麼刪除當前行。顧名思義,每一項要對應一個刪除按鈕。所以,我們要在中繼器中添加一個“刪除”按鈕,通過點擊“刪除”按鈕,來實現刪除數據集中的數據。(注意:點擊中繼器界面,再放入刪除按鈕,在進行編輯,就會有“This”了)
然後,在點擊這個“刪除“按鈕的時候,我們要刪除當前的一行。步驟如下:
1、選中“刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>刪除行;
3、在用例編輯器右側,勾選要刪除行的中繼器;
4、選中“This“;
5、通過“確定”每一個對話框,回到主窗口,完成編輯。
6、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。
B 全部刪除
首先,要刪除中繼器的全部內容,我們還是通過一個刪除按鈕來實現。
我們在主頁(不是中繼器的主頁哦)放一個圓角矩形當刪除按鈕。當點擊這個刪除按鈕的時候,刪除掉中繼器中所有的內容。
接下來,我們在點擊這個“刪除全部”按鈕的鼠標點擊時事件中添加用例!步驟如下:
1、選中“全部刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>刪除行;
3、在用例編輯器右側,勾選要刪除行的中繼器;
4、勾選”規則“;(當前版本沒有“全部“的選項,所以需要通過規則來刪除全部)
5、規則中寫入[[1==1]]或者true即可達到效果;
6、通過“確定”每一個對話框,回到主窗口,完成編輯。
7、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。
C刪除標記行
如果要刪除標記行,當然要先標記後刪除。那麼怎麼標記呢?
我們再放一個刪除按鈕,到我們的案例裏面。這個按鈕的文字是”刪除已標記”。
假設,我們點擊中繼器中任意一行的之後,點擊“刪除已標記“這個按鈕,就能把我們點擊過得一項刪除。
這個效果的實現步驟如下:
一、先進行標記
1、選中中繼器中用於顯示文字的矩形,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>標記行;
3、在用例編輯器右側,勾選要添加標記行的中繼器;
4、勾選”this“;(這樣就標記了當前的數據行)
思考題:如果這裏選擇全部或者規則呢?
二、再執行刪除
“刪除已標記“的刪除動作參考”刪除全部“的截圖,具體步驟如下:
1、選中“刪除已標記”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>刪除行;
3、在用例編輯器右側,勾選要刪除行的中繼器;
4、勾選”已標記“;
5、通過“確定”每一個對話框,回到主窗口,完成編輯。
6、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。
D通過設置規則,刪除滿足條件的的行。
下面我們來看如何根據規則,刪除中繼器中指定的內容。
案例效果:刪除中繼器中顯示的文字內容與輸入內容相同的行。
首先呢,我們還是添加一些元件來幫助我們實現效果,在主頁中我們添加一個文本輸入框,取名叫”Ipt2”,再添加一個刪除按鈕。
然後,按照下列步驟,完成按規則刪除行。
1、選中“刪除”按鈕,雙擊“鼠標單擊時”事件名稱,打開用例編輯器;
2、點擊動作列表中:中繼器>數據集>刪除行;
3、在用例編輯器右側,勾選要刪除行的中繼器;
4、勾選”規則“;
5、“規則”輸入框的右側有個fx,點擊打開編輯框;
6、新建一個局部變量“ipt2”來獲取,文本輸入框“ipt2”中輸入的文字;
7、點擊打開“變量與函數列表”,選擇中繼器的屬性”TargetItem.column0”和局部變量“ipt2”並用布爾“==”進行連接。[[TargetItem.Column0==ipt2]]
8、通過“確定”每一個對話框,回到主窗口,完成編輯。
9、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。
這裏我們只是通過一種場景的模擬,來講述通過規則刪除中繼器某一行的操作。其實,我們能通過規則來實現很多刪除的效果。比如,我們之前講過的刪除全部。
思考:
能不能刪除包含中文的行呢?
能不能刪除第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頁面中,直接點擊新增行就可以了)中多添加幾行,以方便演示。
我們將實現的效果是:
1、點擊文本(“編輯”)的時候,顯示文本框,文本框中顯示舊的數據,並獲取焦點。
2、同時,文本的文字從“編輯”變成”保存”;
3、當完成文本框內容編輯,點擊文本(“保存”)時,當前行數據被更改。
實現步驟如下:
首先,我們需要對文本(Lable)的文字進行判斷,如果它的文字是“編輯”,那麼點擊時,我們完成以下動作:
>>設置文本框的元件文字爲當前數據行“neirong”列的值;
>>設置顯示文本框;
>>設置文本框獲取焦點;
>>設置文本(Lable)的文字爲“保存”。
如果,它的文字是“保存”,那麼點擊時,我們對中繼器的數據進行修改:
1、點擊動作列表中:中繼器>數據集>更新行;
2、在用例編輯器右側,勾選要更新行的中繼器;
3、勾選”this“,即對當前行數據進行修改;
4、選擇要修改數據的列名,當前中繼器數據集只有一列”neirong”,我們選擇它,對他進行修改;如果數據集有多列,並且多列需要修改時,我們在這裏則需要將所有要修改的列名都進行選擇;
5、鍵入新的列值;這裏我們需要把文本框輸入的文字作爲新的列值保存,所以需要點擊“fx”,進行6、7兩步操作;
6、新增局部變量,獲取文本框輸入的文字;
7、點擊打開“變量與函數列表”,選擇局部變量,或者直接鍵入[[局部變量名稱]],完成新列值的編輯。
8、通過“確定”每一個對話框,回到主窗口,完成編輯。
9、點擊預覽,或者生成Html文件,並在瀏覽器中打開,查看效果。