bootstratreeview树形下拉框

最新推荐文章于 2024-08-09 07:09:03 发布

Qi_Kran

最新推荐文章于 2024-08-09 07:09:03 发布

阅读量1.2k

点赞数

分类专栏： bootstrap 文章标签： jquery bootstrap js html5

本文链接：https://blog.csdn.net/z1102354/article/details/106836181

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

话不多说直接上代码

效果图在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-treeview.min.js"></script>
</head>
<style type="text/css">
    .treeStyle {
        opacity: 80%;
        height: 300px;
        overflow:auto;

        position: absolute;
        top: 37px;
        left: 0;
        z-index: 4;
        width: 95%;
        margin: 0 15px 0 15px;
   /*     margin-left: 15px;
        margin-right: 17px;*/
    }
    .treeStyle::-webkit-scrollbar {/*滚动条整体样式*/

        width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/

    }

    .treeStyle::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

        border-radius: 10px;

        -webkit-box-shadow: inset 0 0 5px rgb(64, 64, 64);

        background: #cbcbcb;

    }

    .treeStyle::-webkit-scrollbar-track {/*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        border-radius: 10px;
        background: #EDEDED;

    }
</style>
<body>
<div class="container " style="margin-top: 50px">
    <div class="row">
        <div class="col-sm-4">
            <div class="input-group">
                <input type="text" class="form-control" id="ipt" readonly aria-describedby="size1">
                <span class="input-group-addon" id="size1"><i class="glyphicon glyphicon-chevron-up"></i></span>
            </div>
            <div hidden class="treeStyle" id="tree"></div>
        </div>
    </div>
</div>


<script type="text/javascript" src="bootstrap/js/selectTree.js"></script>
<script>
   $(".input-group").click(function(event){
       $("#tree").show();
       //切换图标
       $("i").toggleClass("glyphicon glyphicon-chevron-down").toggleClass("glyphicon glyphicon-chevron-up");
       //阻止事件传播  防止传到document的点击事件中
       event.stopPropagation();
   })

    $(function () {
        $(document).click(function () {
            $("#tree").hide();
        });
    })
</script>
</body>
</html>

treeview JS

$(function () {
        let $optionTree = $("#tree");
        $optionTree.treeview({
            levels: 3,//默认显示情况下  树显示到2级深度 默认是2
            data: getTree(),
            showCheckbox: 1,//复选框设置，也可以是true
            showIcon: false,
            onhoverColor: 'rgba(67,143,207,0.3)',
            selectedColor: '#000000',
            selectedBackColor: '#EEEEEE',
            collapseIcon:"",
            showTags: 0,//节点的右边显示附加信息 一般要在数据 加tags：[] 属性
            //enableLinks:1,//能给节点附加URL 要与数据里的 href 连用
            showBorder: false,
            onNodeSelected: function (evetn, node) {
                $("#ipt").val(node.text);
                //$("#tree").hide();
                $("i").toggleClass("glyphicon glyphicon-chevron-down").toggleClass("glyphicon glyphicon-chevron-up");

            }
        });

        function getTree() {
            //节点上的数据遵循如下的格式：
            return [
                {
                    text: '角色 1',
                    href: '#parent1',
                    tags: ['4'],
                    state: {
                        selected: false,
                        expanded: true,
                    },
                    nodes: [
                        {
                            text: 'Child 1',
                            href: '#child1',
                            tags: ['2'],
                            nodes: [
                                {
                                    text: "ZChild1",
                                    tags: [10],
                                }, {
                                    text: "ZChild2",
                                    tags: [11]
                                }
                            ]
                        },
                        {
                            text: 'Child 2',
                            href: '#child2',
                            tags: ['3']
                        },
                        {
                            text: 'Grandchild 1',
                            href: '#grandchild1',
                            tags: ['4']
                        },
                        {
                            text: 'Grandchild 2',
                            href: '#grandchild2',
                            tags: ['5']
                        },
                        {
                            text: 'Grandchild 2',
                            href: '#grandchild2',
                            tags: ['5']
                        },
                        {
                            text: 'Grandchild 2',
                            href: '#grandchild2',
                            tags: ['5']
                        },
                        {
                            text: 'Grandchild 2',
                            href: '#grandchild2',
                            tags: ['5']
                        }
                    ]
                },
                /*{
                    text: 'Parent 2',
                    href: '#parent2',
                    tags: ['0']
                },
                {
                    text: 'Parent 3',
                    href: '#parent3',
                    tags: ['0']
                },
                {
                    text: 'Parent 4',
                    href: '#parent4',
                    tags: ['0']
                },
                {
                    text: 'Parent 5',
                    href: '#parent5',
                    tags: ['0']
                }*/
            ];

        }
    }
)