zTree 菜单树js控件见习

最新推荐文章于 2023-09-20 14:53:37 发布

xiewenda8

最新推荐文章于 2023-09-20 14:53:37 发布

阅读量490

点赞数

分类专栏： js java 文章标签： js

本文链接：https://blog.csdn.net/u011129848/article/details/54138141

版权

java 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

今天学习一个zTree菜单树的js编写的菜单控件，官网已经提供了完整的演示demo和API文档以及源码的github地址，官方网址

首先从官网的下载地址下载控件，解压后的目录是这样的：
这里写图片描述
从目录可以看出，给出了完整的demo，以及源码js和样式css文件，api文档页面。

简单入门尝试，其实就是把控件js文件和css样式导出页面中，简单运行一个小demo，偷懒拿了官网的一个演示入门页面代码，将文件导入后运行页面，代码如下：

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../css/demo.css" type="text/css">
  <link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="../../js/jquery.ztree.all.min.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {};
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = [
   {name:"test1", open:true, children:[
      {name:"test1_1"}, {name:"test1_2"}]},
   {name:"test2", open:true, children:[
      {name:"test2_1"}, {name:"test2_2"}]}
   ];
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
  </SCRIPT>
 </HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>