ZtreeDemo

最新推荐文章于 2023-12-12 11:21:28 发布

weixin_30254435

最新推荐文章于 2023-12-12 11:21:28 发布

阅读量150

点赞数

文章标签： javascript php json ViewUI

原文链接：http://www.cnblogs.com/zhang-bo/p/6749276.html

版权

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

转载于:https://www.cnblogs.com/zhang-bo/p/6749276.html

weixin_30254435

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ZtreeDemo

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。步骤 1、文件准备步骤 2、编写 html 页面<!DOCTYPE html><HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <m...
复制链接

扫一扫