JQuery ZTree使用方法详解

时间：2022-06-25 17:23:32 编辑：袖梨来源：一聚教程网

JQuery ZTree简单使用

@(JavaScript)[jQuery, ztree, 入门]

基本概述

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。

zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。 ——参考《百度百科》

官网：zTree官网

PS：zTree的官方API文档和demo挺详细的，值得一读。

案例

使用标准json数据构造ztree

代码如下

复制代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

ztree测试

request.contextPath}/js/easyui/themes/default/easyui.css">

javascript"src="${pageContext.request.contextPath}/js/jquery-1.8.3.js">

$(function(){

$("#btn").click(function() {

var isExists = $("#et").tabs("exists", "标题");

if(isExists) {

$("#et").tabs("select","标题");

} else {

$("#et").tabs("add", {

title:"标题",

closable:true,

iconCls:"icon-save",

content:"<iframeframeborder='no'height='100%'width='100%'src='3-tabs.jsp'>"

});

}

});

$(function() {

var setting = {};

var zNodes = [

{name:'结点1',children:[

{name:'结点11'},

{name:'结点12'}

]},

{name:'结点2'},

{name:'结点3'}

];

$.fn.zTree.init($("#ztree1"), setting, zNodes);

});

北部区域

按钮

内容3

内容4

内容1

内容2

东部区域

南部区域

使用简单json数据构造ztree

代码如下	复制代码

发送ajax请求获取动态json数据构造ztree

json内容

代码如下

复制代码

[

{"id":"11","pId":"0","name":"菜单1"},

{"id":"111","pId":"11","name":"菜单11","page":"xx.action"},

{"id":"112","pId":"11","name":"菜单12","page":"xx.action"},

{"id":"113","pId":"11","name":"菜单13","page":"xx.action"},

{"id":"114","pId":"11","name":"菜单14","page":"xx.action"},

{"id":"12","pId":"0","name":"菜单2"},

{"id":"121","pId":"12","name":"菜单21","page":"xx.action"},

{"id":"122","pId":"12","name":"菜单22","page":"xx.action"},

{"id":"123","pId":"12","name":"菜单23","page":"xx.action"},

{"id":"13","pId":"0","name":"菜单3"},

{"id":"131","pId":"13","name":"菜单31","page":"xx.action"},

{"id":"132","pId":"13","name":"菜单32","page":"xx.action"}

]

html片段

代码如下	复制代码
$(function() { var setting = { data: { simpleData: { enable: true } } }; $.ajax({ url:'${pageContext.request.contextPath}/json/menu.json', type:'get', data:'', dataType:'json', success:function (data) { $.fn.zTree.init($("#ztree3"), setting, data); } }); });

为ztree节点绑定事件动态添加选项卡

json内容

代码如下

复制代码

[

{"id":"11","pId":"0","name":"菜单1"},

{"id":"111","pId":"11","name":"菜单11","page":"xx.action"},

{"id":"112","pId":"11","name":"菜单12","page":"xx.action"},

{"id":"113","pId":"11","name":"菜单13","page":"xx.action"},

{"id":"114","pId":"11","name":"菜单14","page":"xx.action"},

{"id":"12","pId":"0","name":"菜单2"},

{"id":"121","pId":"12","name":"菜单21","page":"xx.action"},

{"id":"122","pId":"12","name":"菜单22","page":"xx.action"},

{"id":"123","pId":"12","name":"菜单23","page":"xx.action"},

{"id":"13","pId":"0","name":"菜单3"},

{"id":"131","pId":"13","name":"菜单31","page":"xx.action"},

{"id":"132","pId":"13","name":"菜单32","page":"xx.action"}

]

html文件

代码如下

复制代码

$(function() {

var setting = {

data: {

simpleData: {

enable: true

}

callback: {

onClick: function(event, treeId, treeNode) {

if(treeNode.page != undefined) {

var isExists = $("#et").tabs("exists", treeNode.name);

if(isExists) {

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

} else {

$("#et").tabs("add", {

title:treeNode.name,

closable:true,

iconCls:"icon-edit",

content:""

});

}

};

$.ajax({

url:'${pageContext.request.contextPath}/json/menu.json',

type:'get',

data:'',

dataType:'json',

success:function (data) {

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

}

});

推荐专题

最新下载

热门教程

JQuery ZTree使用方法详解

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程