Ztree简介
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件
• 兼容 IE、FireFox、Chrome 等浏览器
• 在一个页面内可同时生成多个 Tree 实例
• 支持 JSON 数据
• 支持一次性静态生成 和 Ajax 异步加载 两种方式
• 支持多种事件响应及反馈
• 支持 Tree 的节点移动、编辑、删除
• 支持任意更换皮肤 / 个性化图标(依靠css)
• 支持极其灵活的 checkbox 或 radio 选择功能
• 简单的参数配置实现 灵活多变的功能
树形组件Ztree使用
引入Ztree到项目中
第一步:拷贝如下引入的css/js文件到项目的ztree-test.html页面
第二步:拷贝js到页面
第三步:页面定义显示树的区域
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html>
<head>
<title>Title</title>
<% pageContext.setAttribute("path",request.getContextPath()); %>
<%-- 第一步:拷贝如下引入的css/js文件到项目的ztree-test.html页面
第二步:拷贝js导入到当前页面
第三步:页面定义显示树的区域--%>
<link rel="stylesheet" type="text/css" href="${path}/plugins/ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="${path}/plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${path}/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<SCRIPT type="text/javascript">
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{
id:1, pId:0, name:"Sass管理", open:true},
{
id:11, pId:1, name:"企业管理", open:<