<!DOCTYPE html>
<html>
<head>
<title>JS轻量级树形插件</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="http://img.558idc.com/uploadfile/allimg/210622/0Q25R527-0.jpg"></script>
<script src="http://img.558idc.com/uploadfile/allimg/210622/0Q25RC8-1.jpg"></script>
</head>
<body>
<div id="jstree_demo_div"></div>
<!-- <div id="jstree_demo_div2"></div> -->
</body>
<script type="text/javascript">
// 选择的时候调用的方法
$(‘#jstree_demo_div‘).on("changed.jstree", function(e, data) {
var i, j, r = [];
for (i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).id);
r.push(data.instance.get_node(data.selected[i]).text);
r.push(data.instance.get_node(data.selected[i]).parent);
r.push(data.instance.get_node(data.selected[i]).state.selected);
}
});
$(‘#jstree_demo_div‘).jstree({
‘plugins‘: [‘types‘, ‘themes‘, ‘contextmenu‘],
‘type‘: {
‘default‘ : {
‘icon‘ : false
},
},
‘core‘: {
‘data‘: [{
"id": "id_1",
"parent": "#",
"text": "山东省"
},
{
"id": "id_1_1",
"parent": "id_1",
"text": "济南市"
},
{
"id": "id_2",
"parent": "#",
"text": "河北省",
‘state‘: {
‘selected‘: false
},
},
{
"id": "id_2_1",
"parent": "id_2",
"text": "石家庄",
‘state‘: {
‘selected‘: false
},
},
{
"id": "id_2_2",
"parent": "id_2",
"text": "北京",
‘state‘: {
‘selected‘: true
},
},
{
"id": "id_2_2_1",
"parent": "id_2_2",
"text": "大兴",
‘state‘: {
‘selected‘:false
}
}
]
}
});
</script>
</html>