最基本的zTree

最基本的zTree

1、导jar包

    <link type="text/css" rel="stylesheet" href="<%=basePath%>css/css.css">
    <link type="text/css" rel="stylesheet" href="<%=basePath%>css/demo.css">
    <link type="text/css" rel="stylesheet" href="<%=basePath%>css/main.css">
    <link type="text/css" rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css">

    <script type="text/javascript" src="<%=basePath%>js/jquery-easyui-1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jquery.ztree.excheck-3.5.js"></script>

2、创建容纳zTree的容器

    固定格式 class="ztree"必需
    <ul id="treeDemo" class="ztree" ></ul>

3、设置值并初始化

     <script type="text/javascript">
      var setting={
              data:{
                  simpleData:{
                      enable:true
                  }
              }
      };
      var zNodes=[
          {id:"11",pId:"1",name:"主菜单1",open:true},
          {id:"111",pId:"11",name:"子菜单1",open:true},
          {id:"222",pId:"11",name:"子菜单2",open:true},
          
          {id:"33",pId:"1",name:"主菜单2",open:true},
          {id:"444",pId:"33",name:"子菜单3",open:true},
          {id:"555",pId:"33",name:"子菜单4",open:true}
      ];

      $(function(){
          $.fn.zTree.init($("#treeDemo"),setting,zNodes);
      });
   </script>
   
   以上最基本zTree就出来了