zTree生成动态树

zgwyfz 2013-09-14

环境搭建:需要jquery 1.4+,jquery.ztree.core-3.1.min.js,ztree自带的css文件和图片,并且css文件和图片文件夹要处于同一目录(很重要),否则动态树无法正常显示。

数据库的设计:CREATE TABLE `function` (

               `id` int(4) NOT NULL AUTO_INCREMENT,
               `pid` int(4) DEFAULT NULL,
               `name` varchar(20) NOT NULL,
               `url` varchar(50) DEFAULT NULL,
               `title` varchar(50) DEFAULT NULL,
                `target` varchar(50) DEFAULT NULL,
               `icon` varchar(50) NOT NULL,
               `icon_open` varchar(50) DEFAULT NULL,
              `open` varchar(1) DEFAULT NULL COMMENT '0:close  1:open',
                PRIMARY KEY (`id`)
             ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;

jsp页面:
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=path %>/static_resources/css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=path %>/static_resources/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=path %>/static_resources/javascript/jquery.ztree.core-3.1.min.js"></script>
<script type="text/javascript">
 
 
 
    var setting = {
    async: {
    contentType : "application/json",
    enable : true,
    dataType : "json",
    type : "post",
    url : "<%=path%>/getUserFunction",
    dataFilter: null
    },
    data: { 
    simpleData: { 
    enable: true,
    idKey: "id", 
    pIdKey: "pId",
    rootPId: 0 //根节点
    } 
    }
    };
$(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
 
<title>DTree Demo</title>
</head>
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>

相关推荐