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 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
JavaScript使用canvas绘制随机验证码
Feb 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
Home Coffee Roasting
2021/03/03 咖啡文化
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
Javascript !!的作用
2008/12/04 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
js Calender控件使用详解
2015/01/05 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python中文编码那些事
2014/06/25 Python
python字符串连接方式汇总
2014/08/21 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
python实现批量修改文件名代码
2017/09/10 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
Python创建字典的八种方式
2019/02/27 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
tensorflow的计算图总结
2020/01/12 Python
如何写出好的Java代码
2014/04/25 面试题
小学国旗下的演讲稿
2014/08/28 职场文书
项目合作协议书
2014/09/23 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
房屋认购协议书
2015/01/29 职场文书
幽默导游词开场白
2015/05/29 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
实习感想范文
2015/08/10 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL
PHP RabbitMQ消息列队
2022/05/11 PHP