JQuery ZTree使用方法详解

前端之家收集整理的这篇文章主要介绍了JQuery ZTree使用方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JQuery ZTree简单使用

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

基本概述

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

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

官网:

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

案例

使用标准json数据构造ztree

菜单">内容1
菜单">内容2

使用简单json数据构造ztree

功能菜单">

<script type="text/javascript">
$(function() {
var setting = {
data: {
simpleData: {
enable: true
}
}
};

var zNodes = [
{"id":1,"pId":0,"name":"test1"},{"id":11,"pId":1,"name":"test11"},{"id":12,"name":"test12"},{"id":111,"pId":11,"name":"test111"},{"id":2,"name":"test2"},{"id":3,"name":"test3"},{"id":31,"pId":2,"name":"test31"}
];

$.fn.zTree.init($("#ztree2"),zNodes);
});

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

json内容

菜单1"},{ "id":"111","pId":"11","name":"菜单11","page":"xx.action"},{ "id":"112","name":"菜单12",{ "id":"113","name":"菜单13",{ "id":"114","name":"菜单14",{ "id":"12","name":"菜单2"},{ "id":"121","pId":"12","name":"菜单21",{ "id":"122","name":"菜单22",{ "id":"123","name":"菜单23",{ "id":"13","name":"菜单3"},{ "id":"131","pId":"13","name":"菜单31",{ "id":"132","name":"菜单32","page":"xx.action"} ]

html片段

功能菜单">

<script type="text/javascript">
$(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"),data);
}
});
});

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

json内容

html文件

<script type="text/javascript">
$(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,iconCls:"icon-edit",content:""
});
}
}
}
}
};

$.ajax({
url:'${pageContext.request.contextPath}/json/menu.json',success:function (data) {
$.fn.zTree.init($("#ztree4"),data);
}
});
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章