先來一張成品效果圖设江，整體上有表單區(qū)和選項(xiàng)卡兩部分組成麦乞，選項(xiàng)卡設(shè)置有隱藏。
實(shí)現(xiàn)效果：
? ? ? ?可以通過新增按鈕打開選項(xiàng)卡，編輯信息后再次點(diǎn)擊新增即完成新增信息调鬓；點(diǎn)擊編輯按鈕即可打開選項(xiàng)卡徙垫，同時編輯按鈕變?yōu)楸４妫瑢υ撔羞M(jìn)行編輯后點(diǎn)擊保存即可保存修訂后信息；點(diǎn)擊刪除即可刪除該行信息璃俗；選擇性別即可對中繼器信息按照性別進(jìn)行篩選；在區(qū)間值文本框中輸入數(shù)值即可對中繼器信息按照成績進(jìn)行篩選悉默；點(diǎn)擊全部即可移除篩選顯示全部信息城豁。
實(shí)現(xiàn)思路：
1、首先添加中繼器和表頭抄课，并完善信息
2唱星、添加選項(xiàng)卡相關(guān)組件
3、添加新增按鈕并設(shè)置交互條件
4跟磨、為中繼器中編輯和刪除按鈕設(shè)置交互條件
5间聊、添加兩個篩選條件并設(shè)置交互條件
6、添加全部按鈕并設(shè)置動作來取消篩選
以上就是整體大概的設(shè)計(jì)思路抵拘，中間細(xì)節(jié)部分見下文哎榴。
注：大部分關(guān)鍵組件都進(jìn)行了合適命名，命名的好處就是減少交互動作設(shè)置時張冠李戴僵蛛！
----------------------------------------------分割線---------------------------------------------------
一尚蝌、添加表頭和中繼器內(nèi)容
1、添加五個矩形組件充尉，設(shè)置適當(dāng)大小飘言，并將矩形內(nèi)容設(shè)置為：序號、姓名喉酌、性別热凹、成績和備注，此即為中繼器表格的表頭部分泪电，如下圖：
2般妙、添加一個中繼器，雙擊中繼器進(jìn)入中繼器編輯頁相速，添加五個矩形碟渺，設(shè)置寬度和上面表頭部分一致（可直接復(fù)制表頭，去除矩形文字即可）突诬，將五個矩形分別命名為：序號苫拍、姓名、性別旺隙、成績和備注绒极，添加兩個按鈕編輯和刪除，分別命名為：編輯/保存和刪除蔬捷，特別提醒：此處編輯按鈕可通過改變文字充當(dāng)保存按鈕垄提，通過設(shè)置條件減少了保存按鈕的設(shè)置榔袋。
3、在右邊檢視窗口的屬性標(biāo)簽中為中繼器添加五列铡俐，分別命名為：xuhao凰兑、xingming、xingbie审丘、chengji和beizhu（圖簡省用對應(yīng)拼音命名吏够，亦可自由命名，能對應(yīng)即可）滩报，順便為中繼器添加幾條假數(shù)據(jù)锅知，如下圖：
4、為中繼器數(shù)據(jù)與組件進(jìn)行關(guān)聯(lián)脓钾，在右邊檢視窗口屬性標(biāo)簽的交互中喉镰，為中繼器每項(xiàng)加載時設(shè)置動作，即將中繼器中的五個組件設(shè)置文本為中繼器表的對應(yīng)列名惭笑，例：[[Item.xuhao]]，如下圖：
二生真、添加選項(xiàng)卡相關(guān)組件
1沉噩、該選項(xiàng)卡是用來新增信息和編輯信息的，該部分由矩形柱蟀、文本標(biāo)簽川蒙、下拉框和文本框組成，先添加一個矩形作為底框长已，調(diào)整大小畜眨，然后分別添加下圖標(biāo)識組件并調(diào)整大小和設(shè)置文字；為方便后續(xù)動作設(shè)置术瓮，此處只需將三個文本框和一個下拉框命名為：姓名康聂、性別、成績和備注即可胞四。
2恬汁、雙擊下拉框?qū)?nèi)容進(jìn)行添加，此處設(shè)置兩個值：男和女辜伟。
3氓侧、全選該步驟添加的全部組件進(jìn)行組合，就是將選項(xiàng)卡相關(guān)組件組合為一個导狡，組合后設(shè)置該組合名稱為選項(xiàng)卡约巷，然后設(shè)置選項(xiàng)卡組合為隱藏。
三旱捧、添加新增按鈕并設(shè)置交互
1独郎、添加一個按鈕設(shè)置文字為新增，添加鼠標(biāo)單擊時動作1，點(diǎn)擊編輯條件囚聚，為選項(xiàng)卡組合設(shè)置原件可見值為false靖榕；然后添加動作顯示選項(xiàng)卡組合，因?yàn)槌跏荚O(shè)置選項(xiàng)卡為隱藏顽铸，此處需新增信息時首先設(shè)置其可見然后編輯信息茁计；見下圖：
2、為新增按鈕添加鼠標(biāo)點(diǎn)擊時動作2谓松，點(diǎn)擊編輯條件星压，為選項(xiàng)卡組合設(shè)置原件可見值為true，如下圖：
3鬼譬、當(dāng)選項(xiàng)卡可見時單擊按鈕就是將已編輯信息寫進(jìn)中繼器中娜膘，首先為為中繼器添加動作：添加行
各列內(nèi)容分別為：
xuhao列值為[[LVAR1.itemCount+1]]，意思是序號根據(jù)中繼器已有的行數(shù)自行增加1优质；
xingming列值為添加的局部變量[[LVAR1]]竣贪，變量值就是選項(xiàng)卡組合中姓名文本框的文字；同理chengji列和beizhu列也是對應(yīng)選項(xiàng)卡中成績和備注文本框的文字內(nèi)容巩螃，不贅述演怎；
唯一特殊的地方就是xingbie列的值為選項(xiàng)卡中性別下拉框的被選項(xiàng)的內(nèi)容，如下圖：
4避乏、為了避免下次新增信息時出現(xiàn)上次填寫的信息爷耀，那么就需要將剛才編輯的信息清空，為選項(xiàng)卡中姓名拍皮、成績和備注這三個文本框添加動作設(shè)置文本為空歹叮，最后添加一個動作將選項(xiàng)卡隱藏，至此新增數(shù)據(jù)功能全部完成铆帽，如下圖：
四咆耿、為中繼器中編輯和刪除按鈕設(shè)置交互條件
1、雙擊中繼器進(jìn)入中繼器設(shè)置頁面锄贼，首先為刪除按鈕設(shè)置鼠標(biāo)單擊時動作票灰，添加動作刪除行。如下圖：
2宅荤、為編輯/保存按鈕添加動作屑迂，因該按鈕設(shè)計(jì)時為復(fù)合按鈕，通過改變文字實(shí)現(xiàn)不同交互功能冯键，所以此處設(shè)定鼠標(biāo)單擊時動作有兩個判斷條件：如按鈕文字為編輯惹盼，則實(shí)現(xiàn)編輯功能交互；如按鈕文字為保存惫确，則實(shí)現(xiàn)保存功能交互手报。如下圖：
3蚯舱、首先添加動作1判斷條件為：該按鈕文字為編輯時
首先添加動作顯示選項(xiàng)卡組合；接著設(shè)置選項(xiàng)卡中：姓名掩蛤、成績和備注三個文本框的文字為中繼器該行對應(yīng)列的值枉昏，例：姓名文本框的值為：[[Item.xingming]]。如下圖：
再接著為選項(xiàng)卡的性別下拉框添加設(shè)置列表選中項(xiàng)動作揍鸟，設(shè)置值為：[[Item.xingbie]]兄裂；最后設(shè)置該按鈕文字變?yōu)楸４妫瑸楹罄m(xù)保存數(shù)據(jù)做準(zhǔn)備阳藻。如下圖：
注：編輯時就是把中繼器該行的數(shù)據(jù)賦值給選項(xiàng)卡的對應(yīng)位置中去晰奖！
4、接著為編輯/保存按鈕添加鼠標(biāo)單擊時動作1腥泥，判斷條件為：該按鈕文字為保存時匾南，方法如上；然后為中繼器添加動作更新行蛔外，就是將選項(xiàng)卡中的數(shù)據(jù)更新到中繼器中去蛆楞，方法和上面添加行一樣，再重復(fù)一遍：
在上圖中分別選擇列：xingming夹厌、xingbie臊岸、chengji和beizhu，設(shè)置值為新增的局部變量尊流，局部變量的值分別設(shè)置為：選項(xiàng)卡中姓名文本框的文字、選項(xiàng)卡中性別下拉框的被選項(xiàng)灯帮、選項(xiàng)卡中成績文本框的文字和選項(xiàng)卡中備注文本框的文字崖技，如下圖；最后為按鈕添加隱藏選項(xiàng)卡動作和設(shè)置按鈕文本為編輯钟哥；至此保存功能就完成了迎献，設(shè)置按鈕文本是為下一次編輯做準(zhǔn)備。
注：保存功能就是將選項(xiàng)卡中修訂后的數(shù)據(jù)重新寫入中繼器對應(yīng)行中去腻贰！
五吁恍、添加兩個篩選條件并設(shè)置交互條件
1、添加如下組件：一個下拉框（命名為：性別篩選播演，內(nèi)容為男和女兩個值）冀瓦、三個按鈕、一個文本標(biāo)簽和兩個文本框（分別命名為：最小值和最大值）写烤。如下圖：
2翼闽、為性別篩選按鈕添加鼠標(biāo)點(diǎn)擊時動作添加篩選，設(shè)置條件為局部變量的值：局部變量為性別篩選下拉框的被選項(xiàng)內(nèi)容洲炊，具體為：[[Item.xingbie==LVAR1]]感局。如下圖：
3尼啡、為成績區(qū)間值篩選按鈕設(shè)置動作添加篩選，設(shè)置條件為介于兩個局部變量的值：兩個局部變量為最小值和最大值兩個文本框的內(nèi)容询微，具體為：[[(Item.chengji>LVAR1)&&(Item.chengji<LVAR2)]]崖瞭。如下圖：
注：此處不要把最大值和最小值搞混了，一定是大于最小值撑毛、小于最大值书聚，否則篩選沒結(jié)果的哦！同時上面兩個篩選按鈕設(shè)置動作時一定要取消勾選移除其它篩選代态，這樣在進(jìn)行性別篩選后還可進(jìn)行成績篩選寺惫，否則就無法進(jìn)行組合篩選！
六蹦疑、添加全部按鈕并設(shè)置動作來取消篩選
給上面添加的全部按鈕添加動作移除篩選西雀，以實(shí)現(xiàn)篩選結(jié)束后查看中繼器全部數(shù)據(jù)功能。如下圖：
----------------------------------------------分割線---------------------------------------------------
至此用中繼器實(shí)現(xiàn)學(xué)生成績表的增刪改和組合篩選功能全部完成歉摧，可以自由調(diào)整組件大小艇肴、配色和布局等，由于時間和篇幅原因叁温，后面在選項(xiàng)卡中增加了一個復(fù)合按鈕來實(shí)現(xiàn)新增時保存和編輯后保存兩個功能再悼，就不具體展開了，把圖片放下面膝但，請君自己琢磨冲九！
? ? ? ? ?總結(jié)：由于是在閑暇中在個人項(xiàng)目原型圖中做的小玩意，考慮文檔過大且文章已經(jīng)很詳細(xì)了（PS：有的人一看有原型文檔就不去自己動手做了）跟束，在此就不上傳文件了莺奸，有些東西還是自己動手試試最好，很多時候不是大方向?qū)е滦Ч粚窖纾且恍┬〖?xì)節(jié)造成的灭贷，所以如果感興趣想學(xué)利用中繼器實(shí)現(xiàn)表單的增刪改和篩選的同學(xué)，可以按照教程自己動手做一做略贮，如有疑問可留言索取文檔甚疟。
