avalon全選效果分析講解

時間 2019-11-13

標籤 avalon 全選效果分析講解简体版

原文原文鏈接

全選功能就是

1.點擊全選控制循環元素是否選中。（點擊全選，下面的全部元素選中，再次點擊全部元素取消選中。）

2.點擊循環元素控制全選。（若是當前元素是未選中狀態則全選不選中，若是當前元素是選中狀態而且檢查其餘也是選中狀態則全選按鈕也選中，若是當前元素是選中狀態而且檢查其餘的不全都是全中狀態則全選按鈕不選中）

首先咱們來建一個avalon頁面。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>select all</title>
 6         <script type="text/javascript" src="../avalon.shim.js" ></script>
 7         <script type="text/javascript">
 8             var model=avalon.define({
 9                 $id:"test",
10                 data:[{checked:false},{checked:false},{checked:false}]
11             });
12         </script>
13     </head>
14     <body>
15         <table ms-controller="test" border="1">
16             <tr>
17                 <td><input type="checkbox" />全選</td>
18             </tr>
19             <tr ms-repeat="data">//ms-repeat="data"放入須要循環的元素中（這裏須要循環tr，data是vm裏頭定義的屬性，屬性值類型是對象數組，對象是checked:false未被選中的意思）
20                 <td><input type="checkbox" />xxxxxxx</td>
21             </tr>
22         </table>
23     </body>
24 </html>

效果是這樣的：

實現全選效果功能點一：

1.在全選input上加上雙向綁定屬性ms-duplex-checked="allchecked"

2.在vm裏頭定義屬性allchecked:false(跟第一步的雙向綁定值對應，若是是false就是不選中，若是是true就是選中)

3.在全選input上再加上data-duplex-changed="checkAll",這個事件綁定屬性的意思是當全選的checkbox狀態發生變化時觸發。

4.定義checkAll函數。函數裏頭須要將當前的全選的checkbox的值賦給vm的allchecked屬性這樣這個屬性的值就隨着checkbox的值的變化而變化。而後把這個值賦給一個變量，方便後邊用。而後咱們遍歷vm的data，經過形參el獲取到每一個checkbox對象，而後把上邊定義的變量賦給每一個checkbox對象。這樣咱們三個checkbox的值就跟全選的checkbox的值保持一致了。

5.在循環元素中添加ms-duplex-checked="el.checked"，雙向同步checkbox屬性，將全選的屬性賦給每一個循環元素。

好了，到這一步，功能點一就實現了。點擊全選下面的全部元素選中，再次點擊全部元素取消選中。

咱們看下代碼和效果：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>select all</title>
 6         <script type="text/javascript" src="../avalon.shim.js" ></script>
 7         <script type="text/javascript">
 8             var model=avalon.define({
 9                 $id:"test",
10                 data:[{checked:false},{checked:false},{checked:false}],
11      　　　　　　 allchecked:false,
12                 checkAll:function(){
13                     var bool = model.allchecked = this.checked;
14                     model.data.forEach(function(el){
15                         el.checked = bool;
16                     });
17                 }
18             });
19         </script>
20     </head>
21     <body>
22         <table ms-controller="test" border="1">
23             <tr>
24                 <td><input type="checkbox"  ms-duplex-checked="allchecked" data-duplex-changed="checkAll"/>全選</td>
25             </tr>
26             <tr ms-repeat="data">
27                 <td><input type="checkbox" ms-duplex-checked="el.checked"/>xxxxxxx</td>
28             </tr>
29         </table>
30     </body>
31 </html>

實現全選效果功能點二：

分析：要實現下面三個checkbox點擊控制全選checkbox，就要在下面對象元素中添加對象監聽方法，這樣在每點一次都執行一次方法判斷對全選checkbox的操做。

1.在循環對象元素中添加對象監聽屬性data-duplex-changed="checkOne"

2.在vm裏寫checkOne函數方法（也就是沒點擊一次循環元素要執行的方法）。這個方法是實現功能點二的關鍵。邏輯咱們來分析一下。首先咱們要判斷當前的元素是不是選中，若是沒有選中，就將vm裏頭的allchecked賦爲false，這樣全選也就同步爲不選中了；若是選中，就調用vm裏面data這個數組的一個every方法，這個方法用來檢查data數組中的每一個元素值是否相同，只要有一個不符合就返回false，不然返回true，這個邏輯偏偏就是咱們要的邏輯。好，有這個返回值以後咱們就能夠把這個賦給vm裏頭的allchecked，這樣就實現了若是是選中而且每一個元素都選中的時候就返回true賦給全選的checkbox這樣全選也選中了。若是是選中可是檢查下來不是每一個元素都一致那麼就返回false，這個時候全選的checkbox仍是未選中狀態。

好，到這裏咱們就實現了功能點二了。看下代碼和視圖。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>select all</title>
 6         <script type="text/javascript" src="../avalon.shim.js" ></script>
 7         <script type="text/javascript">
 8             var model=avalon.define({
 9                 $id:"test",
10                 data:[{checked:false},{checked:false},{checked:false}],
11　　　　　　　　　　allchecked:false,
12                 checkAll:function(){
13                     var bool = model.allchecked = this.checked;
14                     model.data.forEach(function(el){
15                         el.checked = bool;
16                     });
17                 },
18                 checkOne:function(){
19                     if(!this.checked){
20                         model.allchecked = false;
21                     }else{
22                         model.allchecked = model.data.every(function(el){
23                             return el.checked;
24                         });
25                     }
26                 }
27             });
28         </script>
29     </head>
30     <body>
31         <table ms-controller="test" border="1">
32             <tr>
33                 <td><input type="checkbox"  ms-duplex-checked="allchecked" data-duplex-changed="checkAll"/>全選</td>
34             </tr>
35             <tr ms-repeat="data">
36                 <td><input type="checkbox" ms-duplex-checked="el.checked" data-duplex-changed="checkOne"/>xxxxxxx</td>
37             </tr>
38         </table>
39     </body>
40 </html>