zTree静态树与动态树的用法——（七）

0.【简介】

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件

兼容 IE、FireFox、Chrome 等浏览器
在一个页面内可同时生成多个 Tree 实例
支持 JSON 数据
支持一次性静态生成和 Ajax 异步加载两种方式
支持多种事件响应及反馈
支持 Tree 的节点移动、编辑、删除
支持任意更换皮肤 / 个性化图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
简单的参数配置实现灵活多变的功能

zTree博客地址：http://ztreeapi.iteye.com/

目前zTree作者已经入驻ItEye，如果有什么需要学习的完全可以到作者博客上去学习，而且zTree的版本已经更新了很多次了，下面的内容跟最新版估计会有很大出入，我不能保证下面的教程在最新版可用。zTree真的是非常强大的树组件，希望能对大家有所帮助！

在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细（中文的哦）

【部分函数和属性介绍】

核心：zTree(setting, [zTreeNodes])

这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。

核心参数：setting

zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置

setting举例:

var setting = {   
    showLine: true,   
    checkable: true   
};

因为参数太多，具体参数详见zTreeAPI

核心参数：zTreeNodes

zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息

zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式

①带有父子关系的标准 zTreeNodes 举例:

var zTreeNodes = [   
    {"id":1, "name":"test1", "nodes":[   
      {"id":11, "name":"test11", "nodes":[   
        {"id":111, "name":"test111"}   
      ]},   
      {"id":12, "name":"test12"}   
    ]},   
    ......   
];

②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：

var treeNodes = [                                                                         
    {"id":1, "pId":0, "name":"test1"},   
    {"id":11, "pId":1, "name":"test11"},   
    {"id":12, "pId":1, "name":"test12"},   
    {"id":111, "pId":11, "name":"test111"},   
    ......   
];

③在进入页面时生成树结构：

var zTree;

$(function() {  
    zTree = $("#tree").zTree(setting, treeNodes);  
 });

1.静态树用法:

<!DOCTYPE html>
<HTML>

    <HEAD>
        <TITLE> ZTREE DEMO - Simple Data</TITLE>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
        <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
        <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
      <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
        <SCRIPT type="text/javascript">
            <!--
            var setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };

            var zNodes = [{
                    id: 1,
                    pId: 0,
                    name: "父节点1 - 展开",
                    open: true
                },
                {
                    id: 11,
                    pId: 1,
                    name: "父节点11 - 折叠"
                },
                {
                    id: 111,
                    pId: 11,
                    name: "叶子节点111"
                },
                {
                    id: 112,
                    pId: 11,
                    name: "叶子节点112"
                },
                {
                    id: 113,
                    pId: 11,
                    name: "叶子节点113"
                },
                {
                    id: 114,
                    pId: 11,
                    name: "叶子节点114"
                },
                {
                    id: 12,
                    pId: 1,
                    name: "父节点12 - 折叠"
                },
                {
                    id: 121,
                    pId: 12,
                    name: "叶子节点121"
                },
                {
                    id: 122,
                    pId: 12,
                    name: "叶子节点122"
                },
                {
                    id: 123,
                    pId: 12,
                    name: "叶子节点123"
                },
                {
                    id: 124,
                    pId: 12,
                    name: "叶子节点124"
                },
                {
                    id: 13,
                    pId: 1,
                    name: "父节点13 - 没有子节点",
                    isParent: true
                },
                {
                    id: 2,
                    pId: 0,
                    name: "父节点2 - 折叠"
                },
                {
                    id: 21,
                    pId: 2,
                    name: "父节点21 - 展开",
                    open: true
                },
                {
                    id: 211,
                    pId: 21,
                    name: "叶子节点211"
                }
            ];

            $(document).ready(function() {
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
            //-->
        </SCRIPT>
    </HEAD>

    <BODY>
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>

        </div>
    </BODY>

</HTML>

效果:

2.动态树(JSON生成树)

①后台代码封装简单格式Json数据：

    public void doGetPrivilegeTree() throws IOException{  
            String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";  
            String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";  
            String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";  
            String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";  
            List<String> lstTree = new ArrayList<String>();  
            lstTree.add(s1);  
            lstTree.add(s2);  
            lstTree.add(s3);  
            lstTree.add(s4);  
            //利用Json插件将Array转换成Json格式  
            response.getWriter().print(JSONArray.fromObject(lstTree).toString());  
        }

②页面使用Ajax获取zTreeNodes数据再生成树

JS代码:

var setting = {  
    isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  
    treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性  
    treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性  
    showLine : true,                  //是否显示节点间的连线  
    checkable : true                  //每个节点上是否显示 CheckBox  
};  
  
var zTree;  
var treeNodes;  
  
$(function(){  
    $.ajax({  
        async : false,  
        cache:false,  
        type: 'POST',  
        dataType : "json",  
        url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径  
        error: function () {//请求失败处理函数  
            alert('请求失败');  
        },  
        success:function(data){ //请求成功后处理函数。    
            alert(data);  
            treeNodes = data;   //把后台封装好的简单Json格式赋给treeNodes  
        }  
    });  
  
    zTree = $("#tree").zTree(setting, treeNodes);  
});

③最后显示效果

3.带有点击事件的zTree(动态设置树的节点与name)

1.页面中准备树的div

<div class="user_left_tree_info">
                <div class="user_left_tree_info_title">部门</div>
                <div class="hr"></div>
                <div class="ztree" id="treeDemo"></div>
            </div>

2.页面加载时候请求树:

searchUnitTree();

/**
     * 请求树信息
     */
    function searchUnitTree(){
        $.ajax({
            type : "post",
            target : "#treeDemo",
            dataType : "json",
            url : "searchTreeAction2.action",
            success : getTree
        });
    }
            
    /**
     * 生成树
     */
    function getTree(treeList2){
        var treeList3 = eval("(" + treeList2 + ")");
        var setting = {
                data : {
                    simpleData : {
                        enable : true,
                        idKey: "unitId",
                        pIdKey: "upUnitId",
                        rootPId : "10",
                    },
                    key : {
                        name : "unitName",
                    }
                },
                callback : {
                    onClick : onClick
                }
        };
        var zNodes = treeList3;

        //添加 树节点的 点击事件；
        var log, className = "dark";
        function onClick(event, treeId, treeNode, clickFlag) {
            clickOnTree(event, treeId, treeNode, clickFlag);
        }
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");  
        treeObj.expandAll(true);
    }
    
    /**
     * 点击树节点的同时，将该部门信息对应的部门编号，部门名称，上级部门编号，上级部门名称保存下来
     */
    function clickOnTree(event, treeId, treeNode, clickFlag){
        //得到该节点的部门编号和部门名字
        document.getElementById("bt_unitId").value = treeNode.unitId;
        document.getElementById("bt_unitName").value = treeNode.unitName;
        /*alert(treeNode.unitId);
        alert(treeNode.unitName);*/
        if (treeNode.unitId == "10") {
            //如果本节点是根节点，那么就不能执行更新和删除操作
            $("#unit_change,#unit_delete").attr("disabled","disabled");
        } else {
            //如果本节点不是根节点，就可以执行更新和删除操作
            $("#unit_change,#unit_delete").removeAttr("disabled");
            //父节点
            var fatherNode=treeNode.getParentNode();
            /*alert(fatherNode.unitId);
            alert(fatherNode.unitName);*/
            //得到父节点的部门编号和部门名称
            document.getElementById("bt_upUnitId").value = fatherNode.unitId;
            document.getElementById("bt_upUnitName").value = fatherNode.unitName;
        }
        searchUnit();
    }

    /**
     *  点击一下树节点表格输出下级节点的部门信息
     */
    function searchUnit() {
        $.ajax({
            type : "post",
            dataType : "json",
            url : "searchUnitByUpId.action",
            data : {
                upUnitId : $("#bt_unitId").val(),
            },
            success : showTable
        });
    }

3.后台传JSON串

public String  searchTree(){
         try {
            this.treeList =unitService.getUnitTree2();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        JSONArray jsonArray = JSONArray.fromObject(treeList);
        this.treeList2 = jsonArray.toString();
        return SUCCESS;
     }

[{"upUnitId":"","unitName":"中心","unitId":"10"},{"upUnitId":"10","unitName":"人才","unitId":"10001"},{"upUnitId":"10","unitName":"项部","unitId":"10002"},{"upUnitId":"10","unitName":"成果","unitId":"10003"},{"upUnitId":"10","unitName":"SS","unitId":"10009"}]

posted @ 2017-08-08 23:48 QiaoZhi 阅读(2557) 评论(0) 编辑收藏举报

指间灵动，快码加编

刷新页面返回顶部

Qiao_Zhi

有远大抱负的人不可忽略眼前的工作!!!

zTree静态树与动态树的用法——（七）

0.【简介】

1.静态树用法:

3.带有点击事件的zTree(动态设置树的节点与name)

公告