五步轻松实现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 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
小程序实现搜索框功能
Mar 26 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
JS数组去重详情
Nov 07 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
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
一行代码告别document.getElementById
2012/06/01 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
vue实现循环切换动画
2018/10/17 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
简单的Python的curses库使用教程
2015/04/11 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
python实现石头剪刀布程序
2021/01/20 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
自考毕业生自我鉴定
2013/11/04 职场文书
机电专业毕业生推荐信
2013/11/10 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python