layui遍历带遍历多选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编辑活动</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
</head>
<body class="" style="background-color: #f2f2f2;">
<div class="layui-fluid">
<form class="layui-form layui-row" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
<!-- 视图层 -->
<div id="gifListIdview"></div>
<!--影藏域-->
<input type="hidden" name="activityId" />
<div class="layui-form-item" style="padding-top: 20px;">
<div class="layui-input-block" style="margin-left: 350px;">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
</div>
</div>
</form>
</div>
<script src="../../layuiadmin/layui/layui.js"></script>
<script>
var resData;
function child(obj) {
console.log(JSON.stringify(obj));
resData = obj;
}
layui.config({
base: '../../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index', //主入口模块
common: 'common',
tinymce: 'tinymce'
}).use(['index', 'util', 'layer', 'laydate', 'common', 'form', 'tinymce', 'laytpl'], function() {
var $ = layui.$,
layer = layui.layer,
form = layui.form,
util = layui.util,
setter = layui.setter,
admin = layui.admin,
common = layui.common,
laytpl = layui.laytpl,
tinymce = layui.tinymce;
$("[name='activityId']").val(resData.ojbId);
var arry=[]
form.on('checkbox(gifid)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
var idnanme="zanNum"+data.value;
var zannum=$("#" + idnanme + "").val();
var idsort="sort"+data.value;
var sortnum=$("#"+idsort+"").val();
// var zannum=$('[name=idnanme]').val();
console.log(zannum)
console.log(sortnum,"sort")
var datajson={"gifId":data.value,"state":data.elem.checked,"zunmun":zannum,"sort":sortnum}
console.log(JSON.stringify(datajson))
if(data.elem.checked){
arry.push(datajson);
}else{
for(var j = 0; j < arry.length; j++) {
var gifId = arry[j].gifId;
if(data.value == gifId){
arry.splice(j,1);
}
}
console.log(JSON.stringify(arry))
}
});
form.on('submit(formDemo)', function(data){
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
console.log(JSON.stringify(data.field))
var object =data.field;
for(var j = 0; j < arry.length; j++) {
var keyN = "n"+arry[j].gifId;
var keyS = "s"+arry[j].gifId;
var obj= data.field;
console.log(obj[keyN])
console.log(obj[keyS])
arry[j].zunmun=obj[keyN];
arry[j].sort=obj[keyS];
}
var endjsion={activityId:data.field.activityId,arry:JSON.stringify(arry)};
console.log(JSON.stringify(endjsion))
common.get("activity/addGift",endjsion , function(res) {
layer.msg(res.msg, {
offset: '15px',
icon: 1,
time: 1500
}, function() {
//location.reload()
//假设这是iframe页
var index = parent.layer.getFrameIndex(window
.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
});
});
console.log(JSON.stringify(arry))
return false;
});
if (resData.type == 1) {
} else {
//查询礼物
common.get("activity/queryGift", {
}, function(res) {
form.val("layuiadmin-form-useradmin", res.data);
var data = { //数据
"list": res.data
}
var getTpl = gifListId.innerHTML,
view = document.getElementById('gifListIdview');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
form.render(); //更新全部
});
}
});
</script>
<script type="text/html" id="gifListId">
{{# layui.each(d.list, function(index, item){ }}
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="height: 40px;margin-top: 20px;">
<div id="" style="width: 30px;height: 40px;float: left;line-height: 40px;margin-right: 5px;">
<input type="checkbox" name="gifid" value="{{item.giftId}}" lay-filter="gifid" lay-skin="primary">
</div>
<div id="" style="width: 150px;height: 40px;float: left;line-height: 40px;">
礼物:<span>{{item.giftName}}</span>
</div>
<div style="width: 100px;height: 40px;float: left;;line-height: 40px;margin-left: 20px;">
<div style="float: left;width: 50px;">赞数:</div>
<div style="float: left;width: 50px;">
<input style="width: 50px;" type="text" id="{{"zanNum"+item.giftId}}" name="{{"n"+item.giftId}}" value="10" lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div id="" style="width: 100px;height: 40px;float: left;;line-height: 40px;margin-left: 20px;">
<div style="float: left;width: 50px;">排序:</div>
<div style="float: left;width: 50px;">
<input style="width: 50px;" type="text" id="{{"sort"+item.giftId}}" name="{{"s"+item.giftId}}" value="1" autocomplete="off" class="layui-input">
</div>
</div>
</div>
{{# }); }}
</script>
</body>
</html>
