html
<body>
<div class="wrapper">
</div>
<div class="layouts" style="display:none">
<div class="layoutsMain">
<div class="title"></div>
<div class="main-wrapper">
<div class="checkboxwrapper">
</div>
</div>
<div class="btn-wrapper">
<a href="javascript:;" class="a-btn-01" onclick="sureBtn()">确定</a>
<a href="javascript:;" class="a-btn-02">取消</a>
</div>
</div>
</div>
</body>
<script typet="text/javascript" src="jquery-1.9.1.min.js"></script>
js
var arr = [{
id: 0,
name: "techang",
title: "特长",
data: [{
id: "001",
displayVaule: "篮球"
}, {
id: "002",
displayVaule: "足球"
}, {
id: "003",
displayVaule: "排球"
}, {
id: "004",
displayVaule: "唱歌"
}, {
id: "007",
displayVaule: "跳舞"
}, {
id: "008",
displayVaule: "跳舞"
}, {
id: "005",
displayVaule: "跳舞"
}, {
id: "006",
displayVaule: "吹笛子"
}]
}, {
id: 1,
name: "aichi",
title: "食物",
data: [{
id: "001",
displayVaule: "红烧肉"
}, {
id: "002",
displayVaule: "腌笃鲜"
}, {
id: "003",
displayVaule: "煎牛排"
}, {
id: "004",
displayVaule: "羊蝎子"
}, {
id: "005",
displayVaule: "酸菜鱼"
}, {
id: "006",
displayVaule: "凉拌金针菇"
}, {
id: "007",
displayVaule: "羊排"
}, {
id: "008",
displayVaule: "番茄鸡蛋"
}, {
id: "009",
displayVaule: "豆汁"
}]
} ]
}]
var list= new Array();
var current = 0;
var zid = 0;
var checkboxWrap = [];
var zhi = []; //选中弹框的值
var zhid = [];
function setPage() {
var tempPd = [];
for (var i = 0; i < arr.length; i++) {
var _title = arr[i].title;
var _data = arr[i].data;
var _name = arr[i].name;
var liHTML = [];
zhi[i] = zhi[i] || [];
zhid[i] = zhid[i] || [];
//list.splice(0,list.length);//清空数组
if(zhi[i][0]=="全选"){
for (var j = 1; j < zhi[i].length; j++) {
liHTML.push('<li class="li-item">' + zhi[i][j+1] + '</li>')
//将值放进data中
data['vote[' + j +'].studentId'] = zhid[i][j];
data['vote[' + j +'].studentName'] = zhi[i][j];
}
}else{
for (var j = 0; j < zhi[i].length; j++) {
liHTML.push('<li class="li-item">' + zhi[i][j] + '</li>')
//循环将选中的值放进data中
data['vote[' + j +'].studentId'] = zhid[i][j];
data['vote[' + j +'].studentName'] = zhi[i][j];
}
}
console.log(list);
tempPd.push('<div class="div-item">' +
'<span class="label">' + _title + ':</span>' +
'<ul class="zhi-ul">' + liHTML.join("") +
'<li class="last"><a href="javascript:;" class="choose" οnclick="choose(this,' + i + ')">' + (zhi[i].length > 0 ? '重新选择' : '选择') + '</a></li>' +
'</ul>' +
'</div>')
}
$('.wrapper').html(tempPd.join(""));
}
setPage();
/**
* [sureBtn 点击弹框的确定事件]
* @return {[type]} [description]
*/
function sureBtn() {
zhi[current] = [];
zhid[zid] = [];
var $checked = $('.checkboxwrapper input[type=checkbox]:checked');
var chsLength = $checked.length;
for (var i = 0; i < chsLength; i++) {
zhi[current].push($checked.eq(i).siblings('span').text());
zhid[zid].push($checked.eq(i).siblings('font').text());
}
$('.layouts').hide();
setPage();
}
//点击取消事件
$('body').on('click', '.a-btn-02', function() {
$('.layouts').hide();
})
/**
* [choose 点击选择弹出弹框]
* @param {[type]} obj [点击的 选择元素]
* @param {[type]} index [‘选择’在页面类别序列]
* @return {[type]} [description]
*/
function choose(obj, index) {
current = index;
checkboxWrap = [];
$('.layouts').show();
var layoutTitle = $(obj).parents('.div-item').find('.label').text();
$('.title').text(layoutTitle.substring(0, layoutTitle.length - 1))
setDialog(index);
}
/**
* [setDialog 弹框里面的checkbox和页面上的数据匹配 并给checked状态]
* @param {[type]} index [页面类别序列]
*/
function setDialog(index) {
zhi[index] = zhi[index] || [];
var checkboxWrap = [],
data = arr[index],
_title = data.title,
_data = data.data,
_name = data.name;
var shu =0 ;
checkboxWrap.push('<label style="margin:10px"><input id="sel_1" οnchange="selectAll()" type="checkbox" ><span>全选</span></label><br/>')
for (var j = 0; j < _data.length; j++) {
var flag = zhi[index].indexOf(_data[j].displayVaule) > -1; //精华
checkboxWrap.push('<label style="margin:10px"><input οnchange="selectAlls()" type="checkbox" ' + (flag ? "checked" : null) + ' name="' + _name + '" value="' + _data[j].id + '"/>'+
'<font>' + _data[j].id + '</font><span>' + _data[j].displayVaule + '</span></label><br/>')
if(flag=null){
shu=shu+1;
}
}
checkboxWrap.push('<label id="label1"></label>')
$('.checkboxwrapper').html(checkboxWrap.join(""));
}
function selectAll(){
var isCheck=$("#sel_1").is(':checked'); //获得全选复选框是否选中
$("input[type='checkbox']").each(function() {
this.checked = isCheck; //循环赋值给每个复选框是否选中
});
}
function selectAlls(){
var len = $("input:checkbox:checked").length;
label1.innerHTML=len;
}
连接后端数据时 将var arr = [{}]中的值换成读取java后端
var arr= new Array();
$.ajax({
url : "/student/vote/queryStudent",
dataType: 'json',
type : "post",
async:false,
success: function (data) {
//$.toast(data.msg);
arr.push({'data':data.rows});
}
});
// console.log(arr);
将多选框选中的值传输给后台
var data = {};
$.ajax({
url:"/student/vote/addActivity",
type: 'POST',
dataType : "json",
data: data,
success: function(data) {
if (data.code == '000') {
$.toast("提交成功");
setTimeout(function() {
pback();
}, 1000);
}else {
$.toast(data.msg, "cancel");
}
},
error: function(data) {
alert("系统异常,请联系管理员");
}
});
//将勾选的值放进data集合中
data['vote[' + j +'].studentId'] = zhid[i][j];
data['vote[' + j +'].studentName'] = zhi[i][j];
java
Controoller
@RequestMapping({"addActivity"})
@ResponseBody
public Object addActivity(StudentVoteActivity activity> ){
activity.setTeacherId(getAppUser().getTeacher().getId());
studentVoteActivityService.addupdateVoteActivity(activity);
return new RspResult(Status.SUCCESS);
}
modelVo
public class StudentVoteActivity {
private List<StudentVote> vote;
public List<StudentVote> getVote() {
return vote;
}
public void setVote(List<StudentVote> vote) {
this.vote = vote;
}
}
model
public class StudentVote {
private Integer id;
private Integer studentId;
private Integer studentNumber;
}
css
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
text-decoration: none;
}
.wrapper {
padding: 30px;
}
.label {
width: 40px;
float: left;
color: #999
}
.zhi-ul {
width: 500px;
float: left;
}
.div-item {
height: auto;
margin-bottom: 10px;
overflow: hidden;
}
.zhi-ul li {
float: left;
margin-right: 10px;
color: #666
}
.zhi-ul li a {
color: #20ace8;
}
.layouts {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .4)
}
.layoutsMain {overflow-y: auto;
width: 300px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
border-radius: 5px;
}
.title {
height: 39px;
padding: 0 10px;
border-bottom: 1px solid #dcdcdc;
font-size: 14px;
line-height: 39px;
color: #333;
}
.main-wrapper {
height: 220px;
overflow-y: auto;
}
.btn-wrapper {
text-align: center;
;
height: 39px;
border-top: 1px solid #dcdcdc;
}
.btn-wrapper a {
width: 60px;margin-left
margin: 0 10px;
height: 24px;
border-radius: 5px;
display: inline-block;
line-height: 24px;
margin-top: 7px;
}
.btn-wrapper a:first-child {
color: #fff;
background: #20ace8
}
.btn-wrapper a:last-child {
color: #666;
background: #f1f1f1
}
.checkboxwrapper {
padding: 10px;
}
.checkboxwrapper label {
width: auto;
height: auto;
min-width: 68px;
display: inline-block;
cursor: pointer;
margin-bottom: 5px;
}
.checkboxwrapper input {
margin-right: 5px;
}
input[type="checkbox"]{
width:20px;
height:20px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 18px;
position: relative;
}
input[type="checkbox"]::before{
content: "";
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #d9d9d9;
}
input[type="checkbox"]:checked::before{
content: "\2713";
background-color: #fff;
position: absolute;
top: 0;
left: 0;
width:100%;
border: 1px solid #18b4ed;
color:#18b4ed;
font-size: 20px;
font-weight: bold;
}
1924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
