Jquery树插件zTree实现菜单树

本文实例为大家分享了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使用汇总》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery插件zTree实现的基本树与节点获取操作示例

    jQuery插件zTree实现的基本树与节点获取操作示例

    本文实例讲述了jQuery插件zTree实现的基本树与节点获取操作.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel=&qu

  • jQuery树插件zTree使用方法详解

    jQuery树插件zTree使用方法详解

    最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔 页面的基本结构是这样的 这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板 jQuery  zTree树的下载链接 页面jsp如下: <html> <head> <meta http-equiv="content-type" content="te

  • zTree jQuery 树插件的使用(实例讲解)

    zTree jQuery 树插件的使用(实例讲解)

    分享说明: 项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去. 效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果. 外部引入资源 <link rel=&qu

  • Jquery树插件zTree用法入门教程

    Jquery树插件zTree用法入门教程

    本文实例分析了Jquery树插件zTree用法.分享给大家供大家参考.具体分析如下: 关于zTree的介绍就搜吧. 这个例子的最终效果如下: 鼠标移动到一级目录时出现全选链接,点击全选链接该目录下的所有子项都被添加到收件人的文本框中,当然点击单个子项则添加一个.至于要添加些什么信息由自己决定. 1. 下载zTee,页面引入jquery.js,根据功能需求添加zTree相应的js和css 复制代码 代码如下: <script type="text/javascript" src=&

  • jQuery zTree树插件简单使用教程

    前言 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 支持静态 和 Ajax 异步加载节点数据. 在开发中我们常需要用到树状的展示. 下载地址:zTree 静态zTree开发流程 引入资源 <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/c

  • Jquery树插件zTree实现菜单树

    本文实例为大家分享了zTree插件实现菜单树的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Title</title> <

  • jQuery插件zTree实现删除树节点的方法示例

    jQuery插件zTree实现删除树节点的方法示例

    本文实例讲述了jQuery插件zTree实现删除树节点的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="

  • jQuery插件zTree实现删除树子节点的方法示例

    jQuery插件zTree实现删除树子节点的方法示例

    本文实例讲述了jQuery插件zTree实现删除树子节点的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="

  • js树插件zTree获取所有选中节点数据的方法

    本文实例讲述了js树插件zTree获取所有选中节点数据的方法.分享给大家供大家参考.具体分析如下: 由于刚接触Tree方面的东西.在网上看到了zTree,是中国人写的.所以API肯定是中文的.而且评论也很好.所以尝试用zTree在项目中.这个获取所有选中节点数据很简单.看一下API就能看懂了.所以我就直接上代码了. 复制代码 代码如下: <!DOCTYPE html> <HTML> <HEAD>     <TITLE> ZTREE DEMO - Standa

  • 多功能jQuery树插件zTree实现权限列表简单实例

    zTree 是一个依靠jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree官网 zTreeAPI下载链接 页面主要引入一下几个文件:  <link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" /> <script type="text/javascript&q

  • jquery树形插件zTree高级使用详解

    使用高级zTree进行对属性结构进行操作的时候,做好的方式是参考官网的API文档. 本文简单介绍下如何通过后台传递过来一个树形结构的树,并且通过页面进行加载. [与后台交互步骤]1.编写页面,引入zTree相关插件:2.编写js脚本,设定树形结构的基本属性:3.编写zTree的PO对象:4.编写返回属性结构的方法(json格式返回):5.页面请求树. 1.引入zTree相关的插件: <script type="text/javascript" src="<%=re

  • 如何使用CSS3和JQuery easing 插件制作绚丽菜单

    前言 在本教程中,我们将创建一个独特的滑动框导航.这样做可以让有菜单的盒子滑出,并且弹出缩略图.在某些菜单项中我们还包含着有进一步链接的子菜单.取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动. 我们将使用jQuery Easing Plugin插件和一些由tibchris.提供的漂亮图片 标记 在HTML的结构中,我们将使用一个无序的列表,其中每个菜单项将包含的主要链接和一个子菜单的div元素: <ul id="sdt_menu" class="sdt_menu

随机推荐