zTree 菜单树js控件见习

Posted xiewenda8

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了zTree 菜单树js控件见习相关的知识,希望对你有一定的参考价值。

今天学习一个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>

其中js文件路径和css样式文件都是我本地相对路径,导入到项目中一定要对应好
好了运行一下页面展示出来:

很简单的一个小demo,这样就算入门了,接下来就可以根据项目需求自行研究官网api满足我们的开发需求了。

以上是关于zTree 菜单树js控件见习的主要内容,如果未能解决你的问题,请参考以下文章

js树形控件—zTree使用总结(转载)

Ztree菜单树数据回显

从零认识ztree树插件

Jquery树控件ZTree异步加载

展示树菜单(zTree)

使用zTree控件制作的表格形式的树形+数据菜单