jQuery-------zTree树形插件-jQuery插件

解压zTree_v3-master，查看demo
1. 使用浏览器访问\zTree_v3-master\demo\cn的index.html页面

1. 案例：最简单的树-标准json数据
步骤

1. 查看/demo/cn/index.html的源代码

2. 把zTreeStyle文件夹和jquery.ztree.all.js文件导入项目

3.在jsp页面中导入上图的两个js和css文件，jquery.js文件也要导入，如果导入则不用导

4.依照/demo/cn/index.html源码，在jsp添加ztree的div

5.在文档加载完成后，初始化ztree的数据

$(function() {

//1.节点数据

var nodes = [

{name: "用户管理", children: [

{name: "用户添加"},

{name: "用户管理"}

]},

{name:"系统管理"},

{name:"权限管理"},

];

//2.节点配置

var setting = {};

//3.初始化节点内容

$.fn.zTree.init($("#tree"), setting, nodes);

6.效果

1. 案例：最简单的树-简单json数据
Js代码

//1.节点数据

//顶级节点的pid设置为0

var nodes = [

{id:1, pId:0, name: "用户管理"},

{id:11, pId:1, name: "用户添加"},

{id:12, pId:1, name: "用户修改"},

{id:2, pId:0, name: "系统管理"},

{id:3, pId:0, name: "权限管理"},

{id:31, pId:3, name: "快递员工"},

{id:32, pId:3, name: "代理商"}

];

//2.节点配置

var setting = {

data: {

simpleData: {

enable: true//使用简单树形json数据

}

};

//3.初始化节点内容

$.fn.zTree.init($("#tree"), setting, nodes);

});

效果

1. 标准和简单json数据的区别
其实他们只是树形结构的数据格式不一样而已
建议说使用简单json数据来构建树型数据
1. 发送ajax网络请求获取菜单数据

把事先准备好的json数据导入到项目中,导在webcontent目录下

Js代码

$(function() {

//1.节点配置

var setting = {

data: {

simpleData: {

enable: true//使用简单树形json数据

}

};

//2.通过发送网络请求来获取树型菜单的数据

var url = "${pageContext.request.contextPath}/json/menu.json"

/* 1.post网络请求最后一个参数为dataType

2.可选。规定预期的服务器响应的数据类型。

默认执行智能判断（xml、json、script 或 html）*/

$.post(url,function(data){

//3.初始化节点内容

$.fn.zTree.init($("#tree"), setting, data);

},"json");

});

1. 监听树形菜单的点击事件
监听菜单的点击事件通过在setting中添加callback即可
Callback中可以写beforeClick、onClick等事件（查看首页源码）
treeNode.name是获取菜单标题、treeNode.isParent是判断当前是否有子菜单
注意如何不重复添加选项卡【掌握】
代码

$(function() {

//1.节点配置

var setting = {

data: {

simpleData: {

enable: true//使用简单树形json数据

}

callback:{

onClick:function(event, treeId, treeNode){

/* 在内容中添加tabbar */

//获取tabs中是否存在当前要展开的内容

if(!treeNode.isParent){

var tab = $("#tt").tabs("exists",treeNode.name);

if(tab){

//如果已经存在tabs中了，就打开选中

$("#tt").tabs("select",treeNode.name);

}else{

$('#tt').tabs('add',{

title: treeNode.name,

content: '<div >Content测试</div>',

closable: true

});

}

};

//2.通过发送网络请求来获取树型菜单的数据

var url = "${pageContext.request.contextPath}/json/menu.json"

/* 1.post网络请求最后一个参数为dataType

2.可选。规定预期的服务器响应的数据类型。

默认执行智能判断（xml、json、script 或 html）*/

$.post(url,function(data){

//3.初始化节点内容

$.fn.zTree.init($("#tree"), setting, data);

},"json");

});

效果图

jQuery-------zTree树形插件-jQuery插件相关推荐

JQuery Tree 树形结构插件 zTree
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件兼容 IE.FireFox.Chrome 等浏览器在一个页面内可同时生成多个 Tree 实例支持 JS ...
oracle 生成目录树,jQuery zTree插件快速实现目录树
ztree是JQuery的一个开源树形目录的插件,用来快速构建网站的树形目录结构,并且提供了功能丰富,利于扩展的API. JQuery ztree官网只要引入jquery和ztree的库js,然后给 ...
j2ee 简单网站搭建：（十）jquery ztree 插件使用入门
为什么80%的码农都做不了架构师?>>> <j2ee 简单网站搭建:(一) windows 操作系统下使用 eclipse 建立 maven web 项目> < ...
zTree 优秀的jquery树插件
zTree 优秀的jquery树插件,文档详细,渲染快使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...
树状图JQuery.ztree插件的使用
一. 树状图,顾名思义就是树形状的图,想必大家对它也不陌生,而且天天都在用的.就比如文件资源管理器里面左侧功能,它就是一个树状图,使用树状图可以很方便快捷地找到所需要的文件,而且对于文件的管理也是非常 ...
jquery ztree插件使用
官网:ztree.me,下载插件在页面中引入ztree相关的文件: <link rel="stylesheet" href="../../../css/zTree ...
ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
chosen jquery ajax搜索,基于chosen插件实现人员选择树搜索自动筛选功能
要实现的功能截图: 要求: 1.点击输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树状态 2.勾选树右侧树的复选框左侧出现相应的内容我用到的插件 vue+ ...
表格树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构
zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(M ...

jQuery-------zTree树形插件-jQuery插件

jQuery-------zTree树形插件-jQuery插件相关推荐

最新文章

热门文章