zTree实现下拉框中的树形图

最新推荐文章于 2024-04-08 10:15:36 发布

茹LYR

最新推荐文章于 2024-04-08 10:15:36 发布

阅读量454

点赞数

分类专栏： JS Layui 文章标签： ztree 下拉框树形图

本文链接：https://blog.csdn.net/qq_43155489/article/details/100114017

版权

JS 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

Layui

5 篇文章 0 订阅

订阅专栏

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../frames/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
<style>
    #departmentTreeDiv{
        display:none;
        background-color: white;
        position:absolute;
        z-index:9999;
        border: 1px solid #DDDDDD;
        margin-top:5px;
        height: 240px;
        width: 170px;
        overflow-y: auto;
    }
    #departmentTreeDiv::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: transparent;
    }

    #departmentTreeDiv::-webkit-scrollbar-thumb {
        background: transparent;
    }

    #departmentTreeDiv:hover::-webkit-scrollbar-thumb {
        background: #9bcaff;
        border-radius: 10px;
    }
</style>
</head>
<body>
<div>
    <div id="ztreeSelect">
        <input type="text" name="department_name" id="department_name" lay-verify="title" autocomplete="off"
               class="layui-input"
               value="" readonly="readonly" onclick="initTree()"/>
        <input type="text" name="department_id" id="department_id" value="" class="layui-input"
               style="display:none;"/>
        <!--同步获取下拉框选中的名称和id-->
        <div id="departmentTreeDiv">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
</div>
</body>
<script src="../frames/jquery-1.11.1.min.js"></script>
<script src="../frames/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
    /*默认下拉框选中*/
    function menuform(treeDivId, inputHideId) {
        var id= $("#department_id").val();
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var node = treeObj.getNodeByParam("id", id, null); //根据新的id找到新添加的节点
        treeObj.selectNode(node); //让新添加的节点处于选中状态
        /*点击隐藏下拉框弹出层*/
        $(document).bind("click", function (e) {
            var target = $(e.target);
            if (target.closest("#ztreeSelect").length == 0) {
                $("#" + treeDivId).hide();
            }
        })
    }
    /*下拉框ztree树状图显示和点击事件*/
    function treeDiv(treeId, treeDivId, inputId, inputHideId, treeNodes, data,selectclick) {
        var setting = {
            view: {
                selectedMulti: false,
                showLine: false,
                showIcon: true,
                expandSpeed: ""
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            async: {
                enable: true
            },
            callback: {
                onClick: zTreeOnClick  /*单击事件查询菜单-liuyuru*/
            }
        };
        $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.expandAll(true); //打开节点
        selectclick;
        function zTreeOnClick(event, treeId, treeNode) {
            $("#" + treeDivId).css("display", "none");
            $("#" + inputId).val(treeNode.name);
            $("#" + inputHideId).val(treeNode.id);
            selectclick();
        }
        $("#" + treeDivId).toggle(); //css切换
        menuform(treeDivId, inputHideId);
    }
    var dataArr=[{id:1,name:'测试1',pId:0},
        {id:2,name:'测试2',pId:1},
        {id:3,name:'测试3',pId:0}];
        //可获取后台数据
    function initTree() {
        var treeNodes = [];
        /*ztree树状图的数据结构-liuyuru*/
        treeNodes[0] = {};
        treeNodes[0]['id'] = "";
        treeNodes[0]['name'] = "全部";
        treeNodes[0]['pId'] = "";
        for (var key in dataArr) {
            var numkey=parseInt(key)+1;
            treeNodes[numkey] = {};
            treeNodes[numkey]['id'] = dataArr[key].id;
            treeNodes[numkey]['name'] = dataArr[key].name;
            treeNodes[numkey]['pId'] = dataArr[key].pId;
        }
        treeDiv("departmentTree", "departmentTreeDiv", "department_name", "department_id", treeNodes, dataArr,function selectclick(){
            return false;
        });
    }
</script>
</html>

在这里插入图片描述

茹LYR

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
zTree实现下拉框中的树形图

实例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="../frames/zTree_v3/css/zTreeStyle/zTreeStyle.css"/><style&gt...
复制链接

扫一扫