avalonjs 学习笔记1---checkbox

Posted 2020-09-16 游天风云

一、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 
　　　　　　}) 
　　　　} 
　　} 
})