ZtreeDemo

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

步骤 1、文件准备

步骤 2、编写 html 页面

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="jquery.ztree.all.min.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {
   view: {
        showLine: true
    }
   };
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = 
   {name:"菜单信息", open:true, children:[
      {name:"系统管理", open:true,children:[
　　　　　　　　//给每一个JSON对象绑定一个时间
            {name:"角色管理","click":"test();"},{name:"用户管理"},{name:"部门管理"}]}
    , {name:"样品中心", open:true,children:[
            {name:"被检者信息"},{name:"样本信息"}]}
    , {name:"实现中心", open:true,children:[
            {name:"文库信息"},{name:"试剂盒信息"}]}
    , {name:"报告中心", open:true,children:[
            {name:"报告管理"},{name:"数据统计"}]}
    , {name:"菜单管理", open:true,children:[
            {name:"菜单管理"}]}        
    
    ]};
    
   //{name:"test2", open:true, children:[
     // {name:"test2_1"}, {name:"test2_2"}]}
   //];
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
   
   
   function  test(){
     alert("wwwwww");
   }
  </SCRIPT>
 </HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

结果展示：

具体属性设置以及具体的Ztree设置见API：

http://www.treejs.cn/v3/api.php

 

posted on 2017-04-22 20:44  超人不会飞丿  阅读(148)  评论(0)  编辑  收藏  举报

导航