ztree的简单使用

前言：什么是 zTree

官方简介： zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。
官网地址： http://www.treejs.cn

一、作为侧边的菜单使用

这是最简单的一种，也是最常用的一种使用方式

目录结构

结构中的css，js均为为ztree官方的。JQuery使用的2.0.3。官方说的理论上1.3+版本的JQery都可以使用的。http://www.treejs.cn/v3/faq.php#_202

前端代码

<!DOCTYPE html>
<html>

  <head>
      <meta charset="utf-8" />
      <title></title>
      <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
      <link rel="stylesheet" href="css/zTreeStyle.css" />
      <script type="text/javascript" src="js/jquery.ztree.core.js" ></script>
      
      <style type="text/css">
          ul.ztree {
              margin-top: 10px;
              border: 1px solid #617775;
              background: #f0f6e4;
          /*  width: 220px; */
              height: 600px;
              overflow-y: scroll;
              overflow-x: auto;
}
          
          .box{
              width: 200px;
          }
      </style>
  </head>

  <body>
      <div class="box">
          <ul id="tree" class="ztree"></ul>
      </div>
  </body>

  <script type="text/javascript">
      var setting = {
          data: {
              simpleData: {
                  enable: true
              }
          }
      };

      var data = [{
              id: 1,
              pId: 0,
              name: "父节点1",
              open:true,//该节点默认打开
          },
          {
              id: 11,
              pId: 1,
              name: "子节点1",
              
          },
          {
              id: 12,
              pId: 1,
              name: "子节点2"
          }
      ];

      $(document).ready(function() {
          $.fn.zTree.init($("#tree"), setting, data);
      });
  </script>

</html>

输出结果

如果你是用SpringMVC进行进行数据请求的话，可以这样进行数据请求。

1.数据表结构：

id 主键id，name 名称，parentId父id
1——alex——0
2——join——1
3——alan——2
4——bill——1

2.Controller

 @RequestMapping("tree")
    @ResponseBody
    public String tree() throws Exception {
            List<Object> listmap = new ArrayList<>();
            Map<String, Object> itemmap = new HashMap<>()
            List<Info> result = InfoService.getAllInfo();

            if (result != null) {
                for (Iterator iterator = result.iterator(); iterator.hasNext(); ) {
                    Info item = (Info) iterator.next();
                    itemmap = new HashMap<>();
                    itemmap.put("id", item.getId());
                    itemmap.put("name", item.getName());
                    itemmap.put("pId", item.getParentId());
                    itemmap.put("open", "true");//默认节点展开
                //点击节点后触发的事件。事件具体方式请看js
                    itemmap.put("click", "getInfoId(" + item.getId() + ")");
                    listmap.add(itemmap);
                }
            }
              //这里使用的java自带的json转换器 net.sf.json.JSONArray;
            JSONArray array = JSONArray.fromObject(listmap);
            return array.toString();
        }
    }

3.Html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <link rel="stylesheet" href="css/zTreeStyle.css" />
        <script type="text/javascript" src="js/jquery.ztree.core.js" ></script>
        
        <style type="text/css">
            ul.ztree {
                margin-top: 10px;
                border: 1px solid #617775;
                background: #f0f6e4;
            /*  width: 220px; */
                height: 600px;
                overflow-y: scroll;
                overflow-x: auto;
}
            
            .box{
                width: 200px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <ul id="tree" class="ztree"></ul>
        </div>
    </body>

    <script type="text/javascript">
     var setting = {
        data: {
            simpleData: {
                enable: true
            }
        }
    };

  //请求controller获取数据
    $(document).ready(function () {
        jQuery.ajax({
            url: "info/tree",
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                $.fn.zTree.init($("#tree"), setting, data);
            }
        });
    });

//点击节点的onclick事件
    function getInfoId(id) {
       alter(id);
    }
    </script>

</html>

结果

二、作为控件调用

作为控件使用时，为了保证高复用性，所以需要把原来使用id进行绑定的方式改为使用this对当前对象进行绑定。此用法在官方文档中未提及，所以自己修改ztree部分代码进行实现。js技术比较菜，勿喷。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <link rel="stylesheet" href="css/zTreeStyle.css" />
        <script type="text/javascript" src="js/jquery.ztree.core.js"></script>

        <style type="text/css">
            ul.ztree {
                margin-top: 10px;
                border: 1px solid #617775;
                background: #f0f6e4;
                /*  width: 220px; */
                height: 600px;
                overflow-y: scroll;
                overflow-x: auto;
            }
            
            .box {
                width: 200px;
            }
        </style>
    </head>

    <body>
        <!--控件1-->
        <input type="text" name="name_1" onclick="showMenuCall(this); return false;" readonly="readonly" placeholder='控件1' />
        <input type="text" name="id_1" style="display:none"/>
        
        <!--控件2-->
        <input type="text" name="name_2" onclick="showMenuCall(this); return false;" readonly="readonly" placeholder='控件2' />
        <input type="text" name="id_2" style="display:none"/>
        
        <!--树形菜单-->
         <div id="menuContentCall" style="display: none;z-index: 10000;position: absolute;margin-top: 10px;">
        <ul id="tree" class="ztree" style="width: 200px"></ul>
    </div>
    </body>

    <script type="text/javascript">
        var data = [{
                id: 1,
                pId: 0,
                name: "alex",
                open: true, //该节点默认打开
            },
            {
                id: 2,
                pId: 1,
                name: "join",

            },
            {
                id: 3,
                pId: 2,
                name: "alan",
            },
            {
                id: 4,
                pId: 1,
                name: "bill"
            }
        ];

//重置当前对象
      var thisObj = new Object();
        var setting = {
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClickCall,
                onClick: onClickCall
            }
        }

        function beforeClickCall(treeId, treeNode) {
            var checkCall = (treeNode || treeNode.isParent);

            return checkCall;
        }


        function onClickCall(e, treeId, treeNode) {
                $(thisObj).next().attr("value", treeNode.id);
                $(thisObj).attr("value", treeNode.name);
                hideMenuCall();
        }

        function showMenuCall(c) {
            thisObj = c;
            $("#menuContentCall").css({left: 0 + $(c).offset().left + "px", top: 0 + $(c).offset().top + $(c).outerHeight() + "px"}).fadeIn("fast");

            $("body").bind("mousedown", onBodyDownCall);
        }

        function hideMenuCall() {
            $("#menuContentCall").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDownCall);
            thisObj = new Object();
        }

        function onBodyDownCall(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContentCall" || $(event.target).parents("#menuContentCall").length > 0)) {
                hideMenuCall();
            }
        }
        
        $(document).ready(function () {
              $.fn.zTree.init($("#tree"), setting, data);
                    hideMenuCall()
        });
        
    
//使用ajax请求后端返回数据初始化ztree
/**
 $(document).ready(function () {
        jQuery.ajax({
            url: "info/tree",
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                $.fn.zTree.init($("#tree"), setting, data);
                hideMenuCall()
            }
        });
    });
**/
    </script>

</html>

结果

作者：Hiseico
链接：https://www.jianshu.com/p/ebc5b3509300
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

ztree实现根节点单击事件，显示节点信息

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

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

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

参考文档：http://www.treejs.cn/v3/api.php

图片.png

需求，点击根节点的时候，alert出所点击的事件里面的具体节点信息，在这个过程里，如果点击到了父节点（嘉定监狱），则不显示任何信息

1：在setting 配置里面，给callback设置，单击事件onClick : zTreeOnClick；

图片.png

2：写一个函数zTreeOnClick

// 单击事件
    function zTreeOnClick(event, treeId, treeNode) {
        
        alert(treeNode.tId + ", " + treeNode.name);
    }

3：父节点不需要点击事件，父节点为1，如果节点为1 的时候，不执行下一步

if (treeNode.id == "1") {
            return;
        }

图片.png

项目js部分完整代码，仅供参考

var detain = function() {

    AssetSavetype = null;
    AssetSelecttype = null;
    getFloorList();

    initLoadMap('detainmap');

    var beforeNodeID;

    var basePath;
    var url;

    var setting = {
        check : {
            enable : true,
            chkStyle : "radio",
            radioType : "all"
        },
        view : {
            selectedMulti : true,
            showLine : false
        },
        data : {
            key : {
                name : "name"
            },
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "pId",
            }
        },
        edit : {
            enable : true,
            removeTitle : "删除节点",
            showRemoveBtn : setRemoveBtn,
            showRenameBtn : setRenameBtn
        },
        async : {
            enable : true,
            url : "/bison/design/detain/getTree",
            autoParam : [ "id" ],
            type : "get",
            dataFilter : ajaxDataFilter,
            dataType : "json"
        },
        callback : {
            // 单击事件
            onClick : zTreeOnClick,
            onCheck : zTreeOnCheck,
            beforeRemove : zTreeBeforeRemove,
            onRemove : zTreeOnRemove,
            onRename : zTreeOnRename
        }
    };

    var zTreeObj;

    // 初始化根节点
    function initTree() {
        $.get(basePath + "/design/detain/initNode?type=1", function(data) {
            // 设置父节点不显示checkbox
            data.returnData.node.nocheck = true;
            zTreeObj = $.fn.zTree.init($("#zTree"), setting,
                    data.returnData.node);
        });
    }

    // 单击事件，向后台发起请求
    function zTreeOnClick(event, treeId, treeNode) {
        if (treeNode.id == "1") {
            return;
        }
        alert(treeNode.tId + ", " + treeNode.name);
        
    }
    
    
    function setRemoveBtn(treeId, treeNode) {
        if(treeNode.id == 1){
            return false;
        }
        return true;
    }

    function setRenameBtn(treeId, treeNode) {
        if(treeNode.id == 1){
            return false;
        }
        return true;
    }

    function zTreeBeforeRemove(treeId, treeNode) {
        if (confirm("是否确认删除"))
            return true;
        return false;
    }

    function zTreeOnRemove(event, treeId, treeNode) {
        $.ajax({
            url : basePath + "/design/detain/deleteNode",
            data : {
                id : treeNode.id,
            },
            type : "get",
            success : function(data) {
            }
        });
        deleteDetain(treeNode.id);
    }

    function zTreeOnRename(event, treeId, treeNode) {
        $.ajax({
            url : basePath + "/design/detain/updateName",
            data : {
                id : treeNode.id,
                name : treeNode.name
            },
            type : "POST",
            success : function(data) {
            }
        });
    }
    
    



    // 异步加载数据过滤器
    function ajaxDataFilter(treeId, parentNode, responseData) {
        var data = responseData.returnData.treeList;
        return data;
    }
    ;

    // 节点勾选事件
    function zTreeOnCheck(event, treeId, treeNode) {
        // 显示围栏
        if (beforeNodeID != treeNode.id) {
            electronicLayerOff = true;
            beforeNodeID = treeNode.id;
        }
        showDetain([ treeNode.id ]);
    }
    ;

    // 获取项目路径
    function getContextPath() {
        var currentPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = currentPath.indexOf(pathName);
        var localhostPath = currentPath.substring(0, pos);
        var projectName = pathName.substring(0,
                pathName.substr(1).indexOf('/') + 1);
        return (localhostPath + projectName);
    }

    // 显示配置记录
    function showDetain(DetainNum) {
        electronicLayer.getSource().clear();
        if (electronicLayerOff) {
            for (var num = 0; num < DetainNum.length; num++) {
                var electronicParam = {
                    service : 'WFS',
                    version : '1.1.0',
                    request : 'GetFeature',
                    typeName : DBs + ':detain',
                    outputFormat : 'application/json',
                    cql_filter : "bid='" + DetainNum[num] + "'"
                };
                $.ajax({
                    url : wfsUrl,
                    data : $.param(electronicParam),
                    type : 'GET',
                    dataType : 'json',
                    success : function(response) {
                        var features = new ol.format.GeoJSON()
                                .readFeatures(response);
                        electronicLayer.getSource().addFeatures(features);
                    }
                });
            }
            electronicLayerOff = false;
        } else {
            electronicLayerOff = true;
        }
    }
    // 资产FID获取
    var FIDObject = function(Filter, Typename) {
        var Fid = [];
        $.ajax({
            url : wfsUrl,
            data : {
                service : 'WFS',
                version : '1.1.0',
                request : 'GetFeature',
                typename : Typename,
                outputFormat : 'application/json',
                cql_filter : Filter
            },
            type : 'GET',
            dataType : 'json',
            async : false,
            success : function(response) {
                if (response.features.length == 1) {
                    Fid[0] = response.features[0].id;
                } else if (response.features.length > 1) {
                    for (var i = 0; i < response.features.length; i++) {
                        Fid[i] = response.features[i].id;
                    }
                } else {
                }
            }

        });
        return Fid;
    };
    // 删除配置记录
    function deleteDetain(id) {
        var Filter = "bid=" + "'" + id + "'";
        var Typename = DBs + ':detain';
        var newFeature = new ol.Feature();
        newFeature.setId(FIDObject(Filter, Typename)[0]);

        var tableType = 'detain';
        updateNewFeature([ newFeature ], tableType, 'remove');
        if (beforeNodeID == id) {
            electronicLayer.getSource().clear();
        }

    }

    // 添加配置
    $("#adddetain").on("click", function() {

        layer.open({
            type : 2,
            title : '添加配置',
            area : [ '550px', '550px' ],
            // fix : false, �
            content : [ './adddetain.jsp', ],
            end : function() {
                initTree();
                electronicLayer.getSource().clear();
            }
        });
    });

    return {
        init : function() {
            basePath = getContextPath();
            initTree();
        }
    };

}();

原文作者：祈澈姑娘

原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知

posted @ 2017-09-11 20:59 ryelqy 阅读(422) 评论(0) 编辑收藏举报

刷新页面返回顶部

ryelqy

ztree的简单使用

前言：什么是 zTree

一、作为侧边的菜单使用

前端代码

1.数据表结构：

2.Controller

3.Html

二、作为控件调用

ztree实现根节点单击事件，显示节点信息

公告