本篇文章介紹了如何用中繼器實(shí)現(xiàn)學(xué)生成績表增刪改及組合篩選。

先來一張成品效果圖，整體上有表單區(qū)和選項(xiàng)卡兩部分組成，選項(xiàng)卡設(shè)置有隱藏。

實(shí)現(xiàn)效果：

可以通過新增按鈕打開選項(xiàng)卡，編輯信息后再次點(diǎn)擊新增即完成新增信息；點(diǎn)擊編輯按鈕即可打開選項(xiàng)卡，同時(shí)編輯按鈕變?yōu)楸４?，對該行進(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. 添加兩個(gè)篩選條件并設(shè)置交互條件；
6. 添加全部按鈕并設(shè)置動(dòng)作來取消篩選。

以上就是整體大概的設(shè)計(jì)思路，中間細(xì)節(jié)部分見下文。

注：大部分關(guān)鍵組件都進(jìn)行了合適命名，命名的好處就是減少交互動(dòng)作設(shè)置時(shí)張冠李戴！

一、添加表頭和中繼器內(nèi)容

1. 添加五個(gè)矩形組件，設(shè)置適當(dāng)大小，并將矩形內(nèi)容設(shè)置為：序號、姓名、性別、成績和備注，此即為中繼器表格的表頭部分，如下圖：

2. 添加一個(gè)中繼器，雙擊中繼器進(jìn)入中繼器編輯頁，添加五個(gè)矩形，設(shè)置寬度和上面表頭部分一致（可直接復(fù)制表頭，去除矩形文字即可），將五個(gè)矩形分別命名為：序號、姓名、性別、成績和備注，添加兩個(gè)按鈕編輯和刪除，分別命名為：編輯/保存和刪除，特別提醒：此處編輯按鈕可通過改變文字充當(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è)置動(dòng)作，即將中繼器中的五個(gè)組件設(shè)置文本為中繼器表的對應(yīng)列名，例：[[Item.xuhao]]，如下圖：

二、添加選項(xiàng)卡相關(guān)組件

1. 該選項(xiàng)卡是用來新增信息和編輯信息的，該部分由矩形、文本標(biāo)簽、下拉框和文本框組成，先添加一個(gè)矩形作為底框，調(diào)整大小，然后分別添加下圖標(biāo)識(shí)組件并調(diào)整大小和設(shè)置文字；為方便后續(xù)動(dòng)作設(shè)置，此處只需將三個(gè)文本框和一個(gè)下拉框命名為：姓名、性別、成績和備注即可。

2. 雙擊下拉框?qū)?nèi)容進(jìn)行添加，此處設(shè)置兩個(gè)值：男和女。

3. 全選該步驟添加的全部組件進(jìn)行組合，就是將選項(xiàng)卡相關(guān)組件組合為一個(gè)，組合后設(shè)置該組合名稱為選項(xiàng)卡，然后設(shè)置選項(xiàng)卡組合為隱藏。

三、添加新增按鈕并設(shè)置交互

1. 添加一個(gè)按鈕設(shè)置文字為新增，添加鼠標(biāo)單擊時(shí)動(dòng)作1，點(diǎn)擊編輯條件，為選項(xiàng)卡組合設(shè)置原件可見值為false；然后添加動(dòng)作顯示選項(xiàng)卡組合，因?yàn)槌跏荚O(shè)置選項(xiàng)卡為隱藏，此處需新增信息時(shí)首先設(shè)置其可見然后編輯信息；見下圖：

2. 為新增按鈕添加鼠標(biāo)點(diǎn)擊時(shí)動(dòng)作2，點(diǎn)擊編輯條件，為選項(xiàng)卡組合設(shè)置原件可見值為true，如下圖：

3. 當(dāng)選項(xiàng)卡可見時(shí)單擊按鈕就是將已編輯信息寫進(jìn)中繼器中，首先為為中繼器添加動(dòng)作：添加行。

各列內(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. 為了避免下次新增信息時(shí)出現(xiàn)上次填寫的信息，那么就需要將剛才編輯的信息清空，為選項(xiàng)卡中姓名、成績和備注這三個(gè)文本框添加動(dòng)作設(shè)置文本為空，最后添加一個(gè)動(dòng)作將選項(xiàng)卡隱藏，至此新增數(shù)據(jù)功能全部完成，如下圖：

四、為中繼器中編輯和刪除按鈕設(shè)置交互條件

1. 雙擊中繼器進(jìn)入中繼器設(shè)置頁面，首先為刪除按鈕設(shè)置鼠標(biāo)單擊時(shí)動(dòng)作，添加動(dòng)作刪除行。如下圖：

2. 為編輯/保存按鈕添加動(dòng)作，因該按鈕設(shè)計(jì)時(shí)為復(fù)合按鈕，通過改變文字實(shí)現(xiàn)不同交互功能，所以此處設(shè)定鼠標(biāo)單擊時(shí)動(dòng)作有兩個(gè)判斷條件：如按鈕文字為編輯，則實(shí)現(xiàn)編輯功能交互；如按鈕文字為保存，則實(shí)現(xiàn)保存功能交互。如下圖：

3. 首先添加動(dòng)作1判斷條件為：該按鈕文字為編輯時(shí)。

首先添加動(dòng)作顯示選項(xiàng)卡組合；接著設(shè)置選項(xiàng)卡中：姓名、成績和備注三個(gè)文本框的文字為中繼器該行對應(yīng)列的值，例：姓名文本框的值為：[[Item.xingming]]。如下圖：

再接著為選項(xiàng)卡的性別下拉框添加設(shè)置列表選中項(xiàng)動(dòng)作，設(shè)置值為：[[Item.xingbie]]；最后設(shè)置該按鈕文字變?yōu)楸４?，為后續(xù)保存數(shù)據(jù)做準(zhǔn)備。如下圖：

注：編輯時(shí)就是把中繼器該行的數(shù)據(jù)賦值給選項(xiàng)卡的對應(yīng)位置中去！

4. 接著為編輯/保存按鈕添加鼠標(biāo)單擊時(shí)動(dòng)作1，判斷條件為：該按鈕文字為保存時(shí)，方法如上；然后為中繼器添加動(dòng)作更新行，就是將選項(xiàng)卡中的數(shù)據(jù)更新到中繼器中去，方法和上面添加行一樣，再重復(fù)一遍：

在上圖中分別選擇列：xingming、xingbie、chengji和beizhu，設(shè)置值為新增的局部變量，局部變量的值分別設(shè)置為：選項(xiàng)卡中姓名文本框的文字、選項(xiàng)卡中性別下拉框的被選項(xiàng)、選項(xiàng)卡中成績文本框的文字和選項(xiàng)卡中備注文本框的文字，如下圖；最后為按鈕添加隱藏選項(xiàng)卡動(dòng)作和設(shè)置按鈕文本為編輯；至此保存功能就完成了，設(shè)置按鈕文本是為下一次編輯做準(zhǔn)備。

注：保存功能就是將選項(xiàng)卡中修訂后的數(shù)據(jù)重新寫入中繼器對應(yīng)行中去！

五、添加兩個(gè)篩選條件并設(shè)置交互條件

1. 添加如下組件：一個(gè)下拉框（命名為：性別篩選，內(nèi)容為男和女兩個(gè)值）、三個(gè)按鈕、一個(gè)文本標(biāo)簽和兩個(gè)文本框（分別命名為：最小值和最大值）。如下圖：

2. 為性別篩選按鈕添加鼠標(biāo)點(diǎn)擊時(shí)動(dòng)作添加篩選，設(shè)置條件為局部變量的值：局部變量為性別篩選下拉框的被選項(xiàng)內(nèi)容，具體為：[[Item.xingbie==LVAR1]]。如下圖：

3. 為成績區(qū)間值篩選按鈕設(shè)置動(dòng)作添加篩選，設(shè)置條件為介于兩個(gè)局部變量的值：兩個(gè)局部變量為最小值和最大值兩個(gè)文本框的內(nèi)容，具體為：[[(Item.chengji>LVAR1)&&(Item.chengji<LVAR2)]]。如下圖：

注：此處不要把最大值和最小值搞混了，一定是大于最小值、小于最大值，否則篩選沒結(jié)果的哦！同時(shí)上面兩個(gè)篩選按鈕設(shè)置動(dòng)作時(shí)一定要取消勾選移除其它篩選，這樣在進(jìn)行性別篩選后還可進(jìn)行成績篩選，否則就無法進(jìn)行組合篩選！

六、添加全部按鈕并設(shè)置動(dòng)作來取消篩選

給上面添加的全部按鈕添加動(dòng)作移除篩選，以實(shí)現(xiàn)篩選結(jié)束后查看中繼器全部數(shù)據(jù)功能。如下圖：

至此用中繼器實(shí)現(xiàn)學(xué)生成績表的增刪改和組合篩選功能全部完成，可以自由調(diào)整組件大小、配色和布局等，由于時(shí)間和篇幅原因，后面在選項(xiàng)卡中增加了一個(gè)復(fù)合按鈕來實(shí)現(xiàn)新增時(shí)保存和編輯后保存兩個(gè)功能，就不具體展開了，把圖片放下面，請君自己琢磨！

總結(jié)：由于是在閑暇中在個(gè)人項(xiàng)目原型圖中做的小玩意，考慮文檔過大且文章已經(jīng)很詳細(xì)了（PS：有的人一看有原型文檔就不去自己動(dòng)手做了），在此就不上傳文件了，有些東西還是自己動(dòng)手試試最好，很多時(shí)候不是大方向?qū)е滦Ч粚?，而是一些小?xì)節(jié)造成的，所以如果感興趣想學(xué)利用中繼器實(shí)現(xiàn)表單的增刪改和篩選的同學(xué)，可以按照教程自己動(dòng)手做一做，如有疑問可留言索取文檔。

本文由 @OnlyYouWJH 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議