中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

實現(xiàn)效果：

可以通過新增按鈕打開選項卡，編輯信息后再次點擊新增即完成新增信息；點擊編輯按鈕即可打開選項卡，同時編輯按鈕變?yōu)楸４?，對該行進行編輯后點擊保存即可保存修訂后信息；點擊刪除即可刪除該行信息；選擇性別即可對中繼器信息按照性別進行篩選；在區(qū)間值文本框中輸入數(shù)值即可對中繼器信息按照成績進行篩選；點擊全部即可移除篩選顯示全部信息。

實現(xiàn)思路：

1. 首先添加中繼器和表頭，并完善信息；
2. 添加選項卡相關組件；
3. 添加新增按鈕并設置交互條件；
4. 為中繼器中編輯和刪除按鈕設置交互條件；
5. 添加兩個篩選條件并設置交互條件；
6. 添加全部按鈕并設置動作來取消篩選。

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

注：大部分關鍵組件都進行了合適命名，命名的好處就是減少交互動作設置時張冠李戴！

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

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

2. 添加一個中繼器，雙擊中繼器進入中繼器編輯頁，添加五個矩形，設置寬度和上面表頭部分一致（可直接復制表頭，去除矩形文字即可），將五個矩形分別命名為：序號、姓名、性別、成績和備注，添加兩個按鈕編輯和刪除，分別命名為：編輯/保存和刪除，特別提醒：此處編輯按鈕可通過改變文字充當保存按鈕，通過設置條件減少了保存按鈕的設置。

3. 在右邊檢視窗口的屬性標簽中為中繼器添加五列，分別命名為：xuhao、xingming、xingbie、chengji和beizhu（圖簡省用對應拼音命名，亦可自由命名，能對應即可），順便為中繼器添加幾條假數(shù)據(jù)，如下圖：

4. 為中繼器數(shù)據(jù)與組件進行關聯(lián)，在右邊檢視窗口屬性標簽的交互中，為中繼器每項加載時設置動作，即將中繼器中的五個組件設置文本為中繼器表的對應列名，例：[[Item.xuhao]]，如下圖：

二、添加選項卡相關組件

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

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

3. 全選該步驟添加的全部組件進行組合，就是將選項卡相關組件組合為一個，組合后設置該組合名稱為選項卡，然后設置選項卡組合為隱藏。

三、添加新增按鈕并設置交互

1. 添加一個按鈕設置文字為新增，添加鼠標單擊時動作1，點擊編輯條件，為選項卡組合設置原件可見值為false；然后添加動作顯示選項卡組合，因為初始設置選項卡為隱藏，此處需新增信息時首先設置其可見然后編輯信息；見下圖：

2. 為新增按鈕添加鼠標點擊時動作2，點擊編輯條件，為選項卡組合設置原件可見值為true，如下圖：

3. 當選項卡可見時單擊按鈕就是將已編輯信息寫進中繼器中，首先為為中繼器添加動作：添加行。

各列內(nèi)容分別為：

xuhao列值為[[LVAR1.itemCount+1]]，意思是序號根據(jù)中繼器已有的行數(shù)自行增加1；

xingming列值為添加的局部變量[[LVAR1]]，變量值就是選項卡組合中姓名文本框的文字；同理chengji列和beizhu列也是對應選項卡中成績和備注文本框的文字內(nèi)容，不贅述；

唯一特殊的地方就是xingbie列的值為選項卡中性別下拉框的被選項的內(nèi)容，如下圖：

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

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

1. 雙擊中繼器進入中繼器設置頁面，首先為刪除按鈕設置鼠標單擊時動作，添加動作刪除行。如下圖：

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

3. 首先添加動作1判斷條件為：該按鈕文字為編輯時。

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

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

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

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

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

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

五、添加兩個篩選條件并設置交互條件

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

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

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

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

六、添加全部按鈕并設置動作來取消篩選

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

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

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

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

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