首页 > 代码库 > avalonjs 学习笔记1---checkbox
avalonjs 学习笔记1---checkbox
一、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(‘+@imageUrl+‘) no-repeat 1px 1px‘,‘background-size‘:‘‘+@taskProgress+‘ 80%‘}" style="margin-right: 5px;" src="http://www.mamicode.com/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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。