avalonjs 學習筆記1---checkbox

標籤：pos   target   ogr   finish   lsp   no-repeat   inpu   修改   for   

一、vscode 安裝使用

1.vs code+node.js下載安裝

2.在node.js command prompt 中運行  npm install -g live-server

3.可以使用vscode了

二、avalonjs中checkbox使用

html：

<tr ms-for="a in checkItems">　　<td ms-if="a.isFinish==true"><input type="checkbox" ms-duplex-checked="true" data-duplex-changed="@checkboxChange($event,a.id,a.name)" /></td>　　<td ms-if="a.isFinish==false"><input type="checkbox" ms-duplex-checked="false" data-duplex-changed="@checkboxChange($event,a.id,a.name)" /></td><td>{{a.name}}</td></tr><tr><td colspan="2">進度：<img id="wid" ms-css="{background:‘url(‘[email protected]+‘) no-repeat 1px 1px‘,‘background-size‘:‘‘[email protected]+‘ 80%‘}" style="margin-right: 5px;" src="../img/biankuang.png"/></td></tr>js:checkboxChange:function(e,a,d){var num=$("input[type=‘checkbox‘]:checked").length; //擷取選中數量var sum=$("input[type=‘checkbox‘]").length;  //擷取總數量//儲存資料var isfinish=e.target.checked;var id=a;var name=d;app.postAjax({url: ‘/task/CheckItem/edit‘,data: {isFinish:isfinish,id:id,Name:name},success: function (result){if (result.statusCode==100) {app.alert(result.msg);//儲存成功之後，修改進度條vVTaskBoard.taskProgress= (num/sum).toFixed(2)*100+"%";} else {app.error(result.msg);}}}, ‘正在提交...‘);
}, avalonjs:checkbox全選中和不全選中html：

<table ms-controller=" duplex1" border="1">    <tr>        <td><input type="checkbox"  ms-duplex-checked="@allchecked"  data-duplex-changed="@checkAll"/>全選</td>    </tr>    <tr ms-for="($index, el) in @data">        <td><input type="checkbox" ms-duplex-checked="el.checked" data-duplex-changed="@checkOne" />{{$index}}::{{el.checked}}</td>    </tr></table>

js：

var vm = avalon.define({    $id: "duplex1",    data: [{checked: false}, {checked: false}, {checked: false}],    allchecked: false,    checkAll: function (e) {//全選改變，則每一個都改變成和全選一樣的,用forEach迴圈改變        var checked = e.target.checked;        vm.data.forEach(function (el) {            el.checked = checked        })    },    checkOne: function (e) {//每一個改變，若沒選中，則全選是false,即沒選中；若選中，判斷其他每一個是否都選中，若選中，則全選是true        var checked = e.target.checked        if (checked === false) {            vm.allchecked = false        } else {//avalon已經為數組添加了ecma262v5的一些新方法            vm.allchecked = vm.data.every(function (el) {//every 判斷數組是否滿足條件，如果滿足，返回true,如果不滿足，返回false,不繼續尋找
　　　　　　　　return el.checked 
　　　　　　}) 
　　　　} 
　　} 
})

  

avalonjs 學習筆記1---checkbox