zTree 构建类似下拉选择的树形结构

yx啦啦啦

于 2020-03-13 14:36:22 发布

阅读量416

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_35445741/article/details/104840253

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

zTree -- jQuery 树插件：http://www.treejs.cn/v3/main.php#_zTreeInfo

下载地址：https://gitee.com/zTree/zTree_v3

效果：

下载的拓展包中包含了文档示例等等，这里暂时只用到了下面的两个文件。

引入文件：

<link rel="stylesheet" href="js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="js/zTree/js/jquery.ztree.core.js"></script>

样式代码：

<div style="position: relative;">
   <!-- 模拟select点击框 以及option的text值显示 有兴趣的可以加个小三角-->
   <input id="orgName" placeholder="选择部门" class="org-select" style="cursor: default;z-index: -1;width:150px;"  readonly >

   <!-- 存储 模拟select的value值 -->
   <input id="orgCode" class="QItem" type="hidden" name="cDepCoding" />

   <!-- zTree树状图 相对定位在其下方 -->
   <div class="ztree" id="ztreeTest"  style="display:none;height: 350px; position: absolute;border:1px solid #4aa5ff;width:200px; background: white; z-index: 99;overflow:auto">
       <ul id="treeDemo" style="display: block; float: left;"></ul>
   </div>
</div>

JS代码：

/**************************树形部门选择**************************/
// 输入框的点击显示隐藏树状图
$('#orgName').click(function (ret) {
    if($('.ztree').css('display') == 'none'){
        $('.ztree').css('display','block');
    } else{
        $('.ztree').css('display','none');
    }
    $("body").bind("mousedown", onBodyDownByActionType);
});
// 点击其他地方隐藏树状图
function onBodyDownByActionType(event) {
    if (event.target.id.indexOf('treeDemo') == -1){
        if (event.target.id != 'ztreeTest'){
            if(event.target.id != 'orgName'){
                hideTree();
            }
        }
    }
}
// 隐藏树状图
function hideTree() {
    $('.ztree').css('display','none');
    $("body").unbind("mousedown", onBodyDownByActionType);
    return false;
}
// 点击子元素的回调
function zTreeOnClick(event, treeId, treeNode) {
    $('#orgName').val(treeNode.name);  // 将点击的节点的数据传至页面
    $('#orgCode').val(treeNode.cDepCoding);
    hideTree();    
}
function zTreeBeforeClick(treeId, treeNode, clickFlag) {
    return (treeNode.id !== 1);
}
// 显示的数据
var nodes = [
    {'cDepCoding':'0','cDepParent':'','name':'总部'},
    {'cDepCoding':'01','cDepParent':'0','name':'一分公司'},
    {'cDepCoding':'02','cDepParent':'0','name':'二分公司'},
    {'cDepCoding':'0101','cDepParent':'01','name':'一分公司一部'},
    {'cDepCoding':'0102','cDepParent':'01','name':'一分公司二部'},
    {'cDepCoding':'0103','cDepParent':'01','name':'一分公司三部'},
    {'cDepCoding':'0201','cDepParent':'02','name':'二分公司一部'},
    {'cDepCoding':'0202','cDepParent':'02','name':'二分公司二部'}
];
var setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "cDepCoding", //树节点ID名称
            pIdKey: "cDepParent", //父节点ID名称
            rootPId: 0,           //根节点ID
        }
    },
    view: {
        showLine : true,                  //是否显示节点间的连线
    },
    //回调
    callback: {
        beforeClick:zTreeBeforeClick, //捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作
        onClick: zTreeOnClick         // 捕获节点被点击的事件回调函数
    }
};
//初始组织树状图
$(document).ready(function () {
    $.fn.zTree.init($("#treeDemo"), setting, nodes);
});