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

这段时间在维护公司的项目,去年做的项目里面有ztree树的例子,想起之前还没有开始写博客,一些知识点也无从找起,要新加一个右击节点事件,折腾了半天,其中也包含了一些知识点,稍稍做了一些demo。

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创作不易,转载请告知 90后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

面试中单例模式有几种写法

纠结单例模式有几种写法有用吗?有点用,面试中经常选择其中一种或几种写法作为话头,考查设计模式和coding style的同时,还很容易扩展到其他问题。这里讲解几...

12170
来自专栏java一日一条

编程,从来都不晚:来自日本的82岁APP开发者

82岁的若宮正子第一次工作时,还是使用算盘来进行计算——而如今,她是世界上年纪最大的iPhone应用开发者之一,也是使得智能手机走入老年人生活的先驱者。

15220
来自专栏java一日一条

博君一笑

9520
来自专栏java一日一条

我的编码习惯 - 参数校验和国际化规范

今天我们说说参数校验和国际化,这些代码没有什么技术含量,却大量充斥在业务代码上,很可能业务代码只有几行,参数校验代码却有十几行,非常影响代码阅读,所以很有必要把...

12610
来自专栏程序员的知识天地

这些拍案惊奇的智障桥段,分明是在蔑视我作为程序员的debug

作为在网络高速发展的时代背景下成长起来的一代人,网络文学几乎伴随着我们的整个青春。

12920
来自专栏java一日一条

华为、腾讯、阿里、网易员工下班时间大曝光,为什么赢不了他们

这年头,不加班都不好意思说自己是上班族的。但有一种行业的疯狂加班程度,已经逐渐成为加班领域的一颗新星——互联网行业从事者!

14630
来自专栏金融民工小曾

电商平台分账交易是怎么做的?

另一篇文章讲到了电商平台的“二清”模式,在实际中,很多互联网电商平台需要分账给上面的平台商户或者其他角色,如果从严格的“二清”界定上来讲部分是属于违规进行了“信...

28510
来自专栏java一日一条

华为加班到底有多恐怖?

“我先说一下我的吧。昨天晚上好不容易11点之前搞完上线回到家,刚开门媳妇就叫到:你TMD给我站到阳台去!”

1.3K20
来自专栏李蔚蓬的专栏

自定义控件基础 之 3.4 ViewGroup的测量 & 3.5 ViewGroup的绘制

之前分析中说了,ViewGroup会去管理其子View,其中一个管理项目就是负责子View的显示大小。当ViewGroup的大小为wrap_content时,V...

11620
来自专栏java一日一条

盲式出轨,上流社会边缘人士,2018朋友圈流行词,哪个词说中了你?

11730

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励