<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="zTree_v3/js/jquery.ztree.all.min.js"></script>
<!--
其他两种css风格样式
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
-->
</head>
<body>
<div id="app">
<div style="background-color: silver;">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
setting: {
check: {
enable: true, // true 表示 开启 异步加载模式
chkboxType: {
"Y": "p",
"N": "s"
}, //被勾选时关联父，取消勾选时关联子
},
data: {
simpleData: {
enable: true
}
},
callback: {
onCheck: this.myonCheck
}
},
zNodes: [{
id: 1,
pId: 0,
name: "随意勾选 1",
open: true
},
{
id: 11,
pId: 1,
name: "随意勾选 1-1",
open: true
},
{
id: 111,
pId: 11,
name: "随意勾选 1-1-1"
},
{
id: 112,
pId: 11,
name: "随意勾选 1-1-2"
},
{
id: 12,
pId: 1,
name: "随意勾选 1-2",
open: true
},
{
id: 121,
pId: 12,
name: "随意勾选 1-2-1"
},
{
id: 122,
pId: 12,
name: "随意勾选 1-2-2"
},
{
id: 2,
pId: 0,
name: "随意勾选 2",
checked: true,
open: true
},
{
id: 21,
pId: 2,
name: "随意勾选 2-1"
},
{
id: 22,
pId: 2,
name: "随意勾选 2-2",
open: true
},
{
id: 221,
pId: 22,
name: "随意勾选 2-2-1",
checked: true
},
{
id: 222,
pId: 22,
name: "随意勾选 2-2-2"
},
{
id: 23,
pId: 2,
name: "随意勾选 2-3"
}
],
// v :'',
idlist: [],
},
mounted() {
this.init()
},
methods: {
init() {
zTreeObj = $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes); //初始化树
zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩
// zTreeObj.checkAllNodes(true);
},
myonCheck(e, treeId, treeNode) {
alert(111111111)
var _this = this;
_this.idlist = [];
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = treeObj.getCheckedNodes(true);
for (let i = 0; i < nodes.length; i++) {
// v += nodes[i].name + ",";
// alert(nodes[i].id); //获取选中节点的值
_this.idlist = _this.idlist.concat(nodes[i].id)
}
// console.log(v)
console.log(_this.idlist)
},
}
})
</script>
</html>
