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();
        }
    };

}();