https://www.cnblogs.com/shinhwazt/p/5828031.html
ztree包:https://pan.baidu.com/s/1vOgGm_elF-lF0VowoHwnOQ 密码:nvmi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/zTree/css/metroStyle/metroStyle.css"/>
<script type="text/javascript" src="../script/jquery-2.0.3.min.js"></script>
<script src="../css/zTree/js/jquery.ztree.all.js"></script>
<style>
body{
}
</style>
</head>
<body>
<div>
<ul class="ztree" id="des_school"></ul>
</div>
</body>
<script type="text/javascript">
$(function(){
alert(11);
initTree();
});
var setting = {
data:{//表示tree的数据格式
simpleData:{
enable:true,//表示使用简单数据模式
idKey:"id",//设置之后id为在简单数据模式中的父子节点关联的桥梁
pidKey:"pId",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
rootId:"null"//pid为null的表示根节点
}
},
view:{//表示tree的显示状态
selectMulti:false//表示禁止多选
},
check:{//表示tree的节点在点击时的相关设置
enable:true,//是否显示radio/checkbox
chkStyle:"checkbox",//值为checkbox或者radio表示
checkboxType:{p:"",s:""},//表示父子节点的联动效果
radioType:"level"//设置tree的分组
},
callback:{//表示tree的一些事件处理函数
// onClick:handlerClick,
onCheck:handlerCheck
}
}
function initTree(){
var data = {
teacher:[
{id:0,name:"张老师",sex:"男"},
{id:1,name:"李老师",sex:"男"},
{id:2,name:"王老师",sex:"女"}
],
student:[
{id:0,name:"学生A",sex:"男",tId:0},
{id:1,name:"学生B",sex:"男",tId:0},
{id:2,name:"学生C",sex:"女",tId:1},
{id:3,name:"学生D",sex:"女",tId:1},
{id:4,name:"学生E",sex:"男",tId:2},
{id:5,name:"学生F",sex:"女",tId:2}
]
}
var teacherList = data.teacher;
var studentList = data.student;
var treeData = [];
treeData.push({id:"root",name:"学校",pId:null});
for(var i=0,il=teacherList.length;i<il;i++){
teacherList[i].pId = "root";
treeData.push(teacherList[i]);
}
for(var i=0,il=studentList.length;i<il;i++){
studentList[i].id = "s"+studentList[i].id;
studentList[i].pId = studentList[i].tId;
treeData.push(studentList[i]);
}
$.fn.zTree.init($("#des_school"),setting,treeData);
}
</script>
</html>