先看效果
1.vue.js代码 下面是js代码
// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.chkbox-item {
list-style: none;
}
.chkbox-icon, .chkbox-txt {
cursor: pointer;
}
.chkbox-icon-more {
display: none;
}
.chkbox-item.active > .chkbox-icon > .chkbox-icon-sort {
display: none;
}
.chkbox-item.active > .chkbox-icon > .chkbox-icon-more {
display: inline;
}
.chkbox-item > .chkbox-container {
display: none;
}
.chkbox-item.active > .chkbox-container {
display: block;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script rel="stylesheet" src="../../../static/vue/node_modules/vue/dist/vue.js"></script>
<script rel="stylesheet" src="../../../static/vue/node_modules/vue/dist/axios.js"></script>
<div id="app">
<ul id="chkbox-container">
<li class="chkbox-item chkbox-item1" v-for="item1 in list">
<span class="chkbox-icon">
<span class="chkbox-icon-sort">+</span>
<span class="chkbox-icon-more">- </span>
</span>
<input class="chkbox-chkbx" type="checkbox">
<span class="chkbox-txt">{{item1.name}}</span>
<ul class="chkbox-container">
<li class="chkbox-item chkbox-item2 active" v-for="item2 in item1.children">
<span class="chkbox-icon">
<span class="chkbox-icon-sort">+</span>
<span class="chkbox-icon-more"> - </span>
</span>
<input class="chkbox-chkbx" type="checkbox">
<span class="chkbox-txt">{{item2.name}}</span>
<ul class="chkbox-container">
<li class="chkbox-item chkbox-item3" v-for="item3 in item2.children">
<input class="chkbox-chkbx" type="checkbox" :id="item3.id">
<span class="chkbox-txt">{{item3.name}}</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<button @click="submit">提交</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [],
ids:[],
},
created: function () {
this.getList();
},
methods: {
getList: function () {
var that = this;
axios.post('/index/demo/datajson').then(function (response) {
var data = response.data.data;
that.list = data;
app.list;
setTimeout(function () {
that.eventsFn();
}, 20)
})
},
eventsFn: function () {
var that = this;
// 展开/收起 事件
$(".chkbox-icon,.chkbox-txt").on("click", function () {
var $this = $(this);
var $item = $this.closest(".chkbox-item");
$item.toggleClass("active");
});
// 设置点选 事件
$(".chkbox-chkbx").on("change", function () {
var $this = $(this);
var $item = $this.closest(".chkbox-item");
var isChk = $this.prop("checked");
isChk ? $item.find(".chkbox-chkbx").prop("checked", true) : $item.find(".chkbox-chkbx").prop("checked", false);
$(".chkbox-item2").each(function () {
that.chkFn($(this));
});
$(".chkbox-item1").each(function () {
that.chkFn($(this));
})
})
},
chkFn: function ($this) {
var $chk = $this.find(">.chkbox-chkbx");
var leng = $this.find(">.chkbox-container>.chkbox-item>.chkbox-chkbx:checked").length;
leng ? $chk.prop("checked", true) : $chk.prop("checked", false);
},
submit:function () {
var that = this;
that.ids = [];
$(".chkbox-item3 .chkbox-chkbx:checked").each(function () {
that.ids.push($(this).attr("id"));
});
// console.log("ids : ",that.ids);
console.log("ids : ",JSON.stringify(that.ids));
}
},
});
// 设置点选
// function chkFn($this) {
// var $chk = $this.find(">.chkbox-chkbx");
// var leng = $this.find(">.chkbox-container>.chkbox-item>.chkbox-chkbx:checked").length;
// leng ? $chk.prop("checked", true) : $chk.prop("checked", false);
// }
// 设置事件
// function eventsFn() {
// // 展开/收起 事件
// $(".chkbox-icon,.chkbox-txt").on("click", function () {
// var $this = $(this);
// var $item = $this.closest(".chkbox-item");
// $item.toggleClass("active");
// });
// // 设置点选 事件
// $(".chkbox-chkbx").on("change", function () {
// var $this = $(this);
// var $item = $this.closest(".chkbox-item");
// var isChk = $this.prop("checked");
// isChk ? $item.find(".chkbox-chkbx").prop("checked", true) : $item.find(".chkbox-chkbx").prop("checked", false);
// $(".chkbox-item2").each(function () {
// chkFn($(this));
// });
// $(".chkbox-item1").each(function () {
// chkFn($(this));
// })
// })
// }
// eventsFn();
</script>
</html>
2.php接口代码
public function dataJson()
{
$data = [
[
'id' => '1',
'parent_id' => 0,
'name' => 'iphone',
'children' => [
[
'id' => '3',
'parent_id' => 1,
'name' => 'iphone-1',
'children'=>[
[
'id' => '5',
'parent_id' => 3,
'name' => 'iphone-1-1',
],
[
'id' => '6',
'parent_id' => 3,
'name' => 'iphone-1-1',
]
]
],
[
'id' => '4',
'parent_id' => 1,
'name' => 'iphone-2',
'children'=>[
[
'id' => '7',
'parent_id' => 4,
'name' => 'iphone-2-1',
],
[
'id' => '8',
'parent_id' => 4,
'name' => 'iphone-2-1',
]
]
],
]
],
[
'id' => '2',
'parent_id' => 0,
'name' => 'huawei',
'children' => [
[
'id' => '9',
'parent_id' => 2,
'name' => 'huawei-1',
'children'=>[
[
'id' => '10',
'parent_id' => 9,
'name' => 'huawei-1-1',
],
[
'id' => '11',
'parent_id' => 9,
'name' => 'huawei-1-1',
]
]
],
[
'id' => '12',
'parent_id' => 2,
'name' => 'huawei-2',
'children'=>[
[
'id' => '13',
'parent_id' => 12,
'name' => 'huawei-2-1',
],
[
'id' => '14',
'parent_id' => 12,
'name' => 'huawei-2-1',
]
]
],
]
],
];
echo json_encode(['errorCode'=>0,'errorMsg'=>'ok','data'=>$data]);
}