Jquery树插件zTree实现菜单树


Posted in Javascript onJanuary 24, 2017

本文实例为大家分享了zTree插件实现菜单树的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Title</title>

<link href="JS/tool/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

<script src="JS/jquery-1.11.1.min.js"></script>

<script src="JS/tool/zTree/js/jquery.ztree.core-3.5.js"></script>

<script src="JS/tool/zTree/js/jquery.ztree.excheck-3.5.js"></script>

</head>
<body style="background: #ddd;">

<div class="mainbody-left">


<div class="vvtree dept-tree left">



<ul id="menu_tree_left" class="ztree"></ul>


</div>

</div>

<script>


var settingLeft = {



view: {




dblClickExpand: false,//双击节点时,是否自动展开父节点的标识




showLine: false,//是否显示节点之间的连线




showIcon: true,




fontCss: { 'color': 'white', 'font-weight': 'normal' },//字体样式函数




selectedMulti: false //设置是否允许同时选中多个节点



},



check: {




//chkboxType: { "Y": "ps", "N": "ps" },




chkStyle: "checkbox",//复选框类型




enable: false //每个节点上是否显示 CheckBox



},



data: {




simpleData: {//简单数据模式





enable: true,





idKey: "id",





pIdKey: "pId",





rootPId: ""




}



},



callback: {





beforeClick: function (treeId, treeNode) {





zTree = $.fn.zTree.getZTreeObj("menu_tree_vehicle");





if (treeNode.isParent) {






zTree.expandNode(treeNode);//如果是父节点,则展开该节点





} else {






zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选,再次单击取消勾选





}




}//,




// onCheck: onCheck




}


};



$(function () {



//初始化菜单树



var zNodes = [




{ id: 0, pId: -1, name: "一级部门", open: true },




{ id: 1, pId: 0, name: "二级部门1", open: false },




{ id: 2, pId: 1, name: "三级部门1" },




{ id: 3, pId: 1, name: "三级部门2" },




{ id: 4, pId: 0, name: "二级部门2", open: false },




{ id: 5, pId: 4, name: "三级部门3" },




{ id: 6, pId: 4, name: "三级部门4", open: false },




{ id: 7, pId: 6, name: "四级部门1" },




{ id: 8, pId: 6, name: "四级部门2" },




{ id: 9, pId: 0, name: "二级部门3" },




{ id: 10, pId: 0, name: "二级部门4" }



];



$.fn.zTree.init($("#menu_tree_left"), settingLeft, zNodes);


});

</script>
</body>

</html>

更多关于ztree控件的内容,请参考专题《jQuery插件ztree使用汇总》

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

Javascript 相关文章推荐
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
浅谈javascript的闭包
Jan 23 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 #Javascript
树结构之JavaScript
Jan 24 #Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 #Javascript
javascript 正则表达式去空行方法
Jan 24 #Javascript
JavaScript中动态向表格添加数据
Jan 24 #Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 #Javascript
ajax分页效果(bootstrap模态框)
Jan 23 #Javascript
You might like
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python闭包实现计数器的方法
2015/05/05 Python
Python 类的特殊成员解析
2018/06/20 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
销售代表求职自荐信
2013/10/01 职场文书
岗位职责风险防控
2014/02/18 职场文书
保护环境标语
2014/06/09 职场文书
认错检讨书
2014/10/02 职场文书
三年级学生评语大全
2014/12/26 职场文书
统计工作个人总结
2015/03/03 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
《窃读记》教学反思
2016/02/18 职场文书
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL