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测试 北部区域 按钮
使用简单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片段
为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文件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
