Ztree学习(-)简单例子

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>
Ztree学习(-)简单例子

猜你喜欢
