五步轻松实现zTree的使用


Posted in Javascript onNovember 01, 2017

本文为大家分享了松实现zTree的使用的具体步骤,供大家参考,具体内容如下

1、导入zTree的配置文件

<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script> 
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />

 2、在所需要的位置设置class="ztree"

<div data-options="title:'基础菜单'"> 
   <ul id="baseMenu" class="ztree"></ul> 
</div>

3、根据需要选择生成简单zTree格式还是标准zTree格式(这里只讲简单)ps:注意要在页面加载完成后的function里面写

var setting = { 
  data: { 
    simpleData: { 
      enable: true //支持json格式 
  } 
},

4、编写树形菜单(简单和dTree差不多)

var zNodes = [ //驼峰式命名pId 
  {id:1,pId:0,name:"父节点1"},       
  {id:2,pId:0,name:"父节点2"},           
  {id:11,pId:1,name:"父1子节点1"}, 
  {id:12,pId:1,name:"父1子节点2"}, 
];

5、生成树形菜单

$.fn.zTree.init($("#baseMenu"), setting, zNodes);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
vue中element 上传功能的实现思路
Jul 06 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
BootStrap TreeView使用实例详解
Nov 01 #Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 #Javascript
详解Vue组件实现tips的总结
Nov 01 #Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 #Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 #Javascript
js前端导出Excel的方法
Nov 01 #Javascript
JS二分查找算法详解
Nov 01 #Javascript
You might like
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
利用JS制作万年历的方法
2017/08/16 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python利用递归实现文件的复制方法
2018/10/27 Python
用django设置session过期时间的方法解析
2019/08/05 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
房地产还款计划书
2014/01/10 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
电话营销开场白
2015/05/29 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript