<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></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",
"text": "河北省",
‘state‘: {
‘selected‘: false
},
{
"id": "id_2_1",
"parent": "id_2",
"text": "石家庄",
{
"id": "id_2_2",
"text": "北京",
‘state‘: {
‘selected‘: true
},
{
"id": "id_2_2_1",
"parent": "id_2_2",
"text": "大兴",
‘state‘: {
‘selected‘:false
}
}
]
}
});
</script>
</html>
