Ztree实现树形菜单

**

zTree使用教程

**

在实际的项目开发中,主要使用zTree来进行异步加载数据,如果数据量大的话,这样可以大大的减少服务器的压力,初学zTree,费了很多心思,现在总结zTree的使用方法。
1. 下载JQuery zTree v3.5.zip (有更高的版本)
2. 下载后打开的目录
3. 然后引人css和js (必须要放入相应的位置,特别是css):

**
**

实现效果图:

**

Ztree实现树形菜单_第1张图片

Ztree实现树形菜单_第2张图片

Ztree实现树形菜单_第3张图片

HTML页面代码:

**


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>zTree 案例title>
       <script type="text/javascript" src="js/jquery-1.4.4.min.js">script>
<script type="text/javascript" src="js/jquery.ztree.core-3.0.js">script>
<link rel="stylesheet" type="text/css" media="screen" href="css/zTreeStyle/zTreeStyle.css" />  <script language="JavaScript">  
    var setting = {  
        view: {
              //dblClickExpand: false,
              expandSpeed: 100 //设置树展开的动画速度
        },
        //获取json数据
        async : {  
            enable : true, 
            url: "ZtreeServlet", // Ajax 获取数据的 URL 地址  
            autoParam : [ "id", "name" ] //ajax提交的时候,传的是id值
        },  
        data:{ // 必须使用data  
            simpleData : {  
                enable : true,  
                idKey : "id", // id编号命名   
                pIdKey : "pId", // 父id编号命名    
                rootPId : 0 
            }  
        },  
        // 回调函数  
        //treeId
        callback : {  
            onClick : function(event, treeId, treeNode, clickFlag) {  
                if(true) {
                    alert(" 节点id是:" + treeNode.id + ", 节点文本是:" + treeNode.name);      
                }  
            },  
            //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数  
            onAsyncSuccess : function(event, treeId, treeNode, msg){  
            }  
        }  
    };  

    // 过滤函数  
    function filter(treeId, parentNode, childNodes) {  
        if (!childNodes)  
            return null;  
        for ( var i = 0, l = childNodes.length; i < l; i++) {  
           childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');  
        }  
        return childNodes;  
    }  

    //   
    $(document).ready(function() {  
        $.fn.zTree.init($("#tree"), setting );  
    });  
script>  
HEAD>  
<BODY>  
<div>  
  <!—这里的 ulclass名字一定要是ztree,不能更改-->
        <ul id="tree" class="ztree">ul>  
    div>  
BODY>  
HTML>  

提交的action :返回一个json(其实就是一个字符串)数据,这里的json数据需要自己来拼接,拼接好后返回就行了,json数据拼接成:[{“id”:”1”,”pId”:”0”,”name”:”张学友”,”isParent”:true},
{“id”:”11”,”pId”:”1”,”name”:”吻别”},
{“id”:”2”,”pId”:”0”,”name”:”刘德华”,”isParent”:true},
{“id”:”21”,”pId”:”2”,”name”:”练习” }]
就可以了。
String json =
[{“id”:”1”,”pId”:”0”,”name”:”张学友”,”isParent”:true},
{“id”:”11”,”pId”:”1”,”name”:”吻别”},
{“id”:”2”,”pId”:”0”,”name”:”刘德华”,”isParent”:true},
{“id”:”21”,”pId”:”2”,”name”:”练习” }]

Out.print(json);

注意:如果要一次性加载全部数据的话,就直接从数据库取出全部数据来拼接就行了,如果要异步加载数据的,就需要用到一个参数://获取json数据
async : {
enable : true,
url : “${projectUtil.getWebRealPath()}/treeview/treeview!zTreeJSON.action”, // Ajax 获取数据的 URL 地址
autoParam : [ “id”, “name” ] //ajax提交的时候,传的是id值
},
先从数据库取出最顶级数据。然后根据id号再从数据库查询。

**

Java代码部分实现:

**

package com.yydhy.treetable;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ZtreeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        String json = "[{\"id\":\"1\",\"pId\":\"0\",\"name\":\"张学友\"},\n"
                + "{\"id\":\"11\",\"pId\":\"1\",\"name\":\"吻别\"},\n"
                + "{\"id\":\"2\",\"pId\":\"0\",\"name\":\"刘德华\"},\n"
                + "{\"id\":\"20\",\"pId\":\"2\",\"name\":\"练习刘德华01\" },"
                + "{\"id\":\"21\",\"pId\":\"20\",\"name\":\"练习刘德华01-01\" },"
                + "{\"id\":\"22\",\"pId\":\"2\",\"name\":\"练习刘德华02\" }]";
        response.getWriter().write(json);

    }
}

**

自定义部门树形菜单实现

:(修改了自定义属性depart_id

**


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>zTree 案例title>
        <script src="zTree_v3/js/jquery-1.4.4.min.js" type="text/javascript">script>
        <script src="zTree_v3/js/jquery.ztree.core-3.5.min.js" type="text/javascript">script>
        <link href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
        <script language="JavaScript">
            var setting = {
                view: {
                    //dblClickExpand: false,
                    expandSpeed: 100 //设置树展开的动画速度
                },
                //获取json数据
                async: {
                    enable: true,
                    url: "ZtreeMyServlet", // Ajax 获取数据的 URL 地址  
                    autoParam: ["depart_id", "name"] //ajax提交的时候,传的是id值
                },
                data: {// 必须使用data  
                    simpleData: {
                        enable: true,
                        idKey: "depart_id", // id编号命名   
                        pIdKey: "parentid", // 父id编号命名    
                        rootPId: 0
                    }
                },
                // 回调函数  
                //?????treeId
                callback: {
                    onClick: function (event, treeId, treeNode, clickFlag) {
                        if (true) {
                            alert(" 节点id是:" + treeNode.id + ", 节点文本是:" + treeNode.name);
                        }
                    },
                    //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数  
                    onAsyncSuccess: function (event, treeId, treeNode, msg) {
                    }
                }
            };

            // 过滤函数  
            function filter(treeId, parentNode, childNodes) {
                if (!childNodes)
                    return null;
                for (var i = 0, l = childNodes.length; i < l; i++) {
                    childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
                }
                return childNodes;
            }

            //   
            $(document).ready(function () {
                $.fn.zTree.init($("#tree"), setting);
            });
        script>  
    HEAD>  
    <BODY>  
        <div>  
            
            <ul id="tree" class="ztree">ul>  
        div>  
    BODY>  
HTML>  

下载地址:http://download.csdn.net/detail/laonayonghaifeisi/9597470

你可能感兴趣的:(java,jquery,Java学习)