中继器 删除行_Axure9实操教程9-中继器动作(二)
難得連續兩天都有時間來更新,嘿嘿,我不是個勤勞的人,如果白天沒時間,不要指望我晚上健完身會在家里奮筆疾書,哈哈哈,因為肥宅已經累趴下不想起來了……
添加行
在中繼器中加入數據。我們事先已經在中繼器左側做了輸入信息的表單,點擊錄入就可以將表單中的信息放入中繼器中:
添加行點擊下面添加行按鍵,對第一行點擊fx進行賦值,因為每次點擊錄入只添加一行數據:
添加行fx中局部變量的應用我們前面已經講過,注意的是,當輸入內容來自文本框的時候,變量值應該選擇元件文字:
設置變量當輸入內容來自下拉框的時候,則要選擇被選項:
設置變量設置好后,預覽會發現當文本框中什么都沒有輸入的時候,點擊也會添加空值給中繼器。這明顯不符合邏輯,所以我們要添加條件:
那么我們最后得到的“錄入”交互應該如下:
錄入交互這里多說一點,在設置多個條件的時候,右上角有一個“匹配以下全部條件”和“匹配以下任何條件”的選項:
條件邏輯要使得這個添加行的功能更加完善,還有很多優化點要考慮,比如:
以上等等附加的產品體驗設計,在真正做設計的時候都應該考慮到,但是這里我們就先不講的那么深入了,一步一步來,這里實現添加行功能就可以了。
標記行、取消標記行、刪除行
為什么這3個動作寫一起呢?因為在實際運用的時候,刪除行動作總是與標記行和取消標記行一起使用的。
首先我們來分析一下功能邏輯:
首先設置選中交互,即選中復選框則選中全部表格單元格,同理取消選中復選框則取消全部表格單元格的選中狀態:
選中行但是我們的最終目的是操作中繼器中的數據,僅僅是選中了元件,對于中繼器來說并不知道你選中了那一行數據,要讓中繼器知道必須用中繼器的動作來對選中行進行標記,也就是說,在選中復選框的時候還要標記行,取消選中則取消標記行:
標記行和取消標記行這里標記行和取消標記行用的都是當前,因為復選框與其要作用的數據處于同一項中。“全部”的意思是對中繼器中所有的數據進行標記/取消標記;“規則”則是通過用公式來制定一個規則,符合的就標記,比如標記所有職位為“工程師”的行。
還有一個小功能——全選,實現方式如下:
全選功能注意:全選功能只能選中中繼器當前頁面的全部數據。
設置全選后不用再設置標記行和取消標記行,因為中繼器的復選框在改變選中狀態的時候就會觸發這個兩個動作(上面已經設置了)。
最后就是刪除動作了,因為已經將要刪除的行都標記出來了,所以刪除行時,只需要選擇“已標記”即可:
刪除行刪除時有一個小小的優化點,那就是——刪除后,不要忘記取消全選復選框的選中狀態哦!如果不取消會導致全選功能異常。
改變選中狀態更新行
更新行用來更新中繼器中的數據,同樣也要和標記行、取消標簽行一起使用。
在本例子中,當員工信息發生變化的時候,就需要更新數據了。首先來看設計邏輯:
那么首先我們需要一個更新信息的編輯界面和編輯按鍵:
更新信息的編輯界面和按鍵畫好界面后,將所有元件打包組合為一個組,命名為:編輯界面。將里面的文本框和下拉框都重新命名,區別于左側的錄入界面。
這里有寶寶們有疑問,為什么要把編輯按鍵放在中繼器中,放在刪除按鍵旁邊不是更加美觀么?
答:沒錯,但是如果做一個統一的編輯按鍵,會涉及到更復雜的邏輯,比如如何讓系統知道你是多選還是單選?如果多選怎么辦?在這個初學階段,我們先簡單一點,循序漸進。將編輯按鍵放在每一項,點擊編輯按鍵則肯定編輯的是該行,不存在多選的問題。
然后,第一步實現選擇需要更新的一行,點擊編輯按鍵,將數據讀取到編輯界面中:
編輯按鍵交互注意:因為性別、職位、部門是下拉框,所以點擊編輯按鍵時對這3個數據,應該選擇“設置列表選中項”動作,并設置為“值”=中繼器中的數據。
然后,再加一個顯示編輯界面的動作,并將編輯界面這個組隱藏,隨后我們應該進行的是更新動作,那么怎么讓系統知道更新哪一行呢,這里就要在編輯按鍵上再加一個標記行的動作了:
完成編輯按鍵交互寶寶們可以發現,在標記行之前,我先做了一次取消標記,并且取消了全部。這是為什么呢?因為我們可以多次點擊不同行的編輯的,這個時候如果沒有一開始的取消標記,就可能會標記很多行,更新的時候,全部標記的行都會被更新成一樣的數據,這是不對的。
最后,點擊更新按鍵,應該將對應行進行更新,并且關閉編輯界面。
選擇更新行動作,更新“已標記”的行,點擊“+選擇列”來設置更新值,將每一列數據都設置一次:
更新行注意在設置局部變量的時候,下拉框要使用的是“被選項”:
更新行完成更新按鍵交互:
更新交互好了,來預覽看看效果吧!
該吃飯啦,今天就到這里吧,休息~
本教程所講示例下載:鏈接:文件分享
總結
以上是生活随笔為你收集整理的中继器 删除行_Axure9实操教程9-中继器动作(二)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 乐分期放款多久到账
- 下一篇: 显示文字_在 iPhone 上调整显示与