[Html-笔记 001]Html+JS+CSS最简单的自定义Tree树

最新推荐文章于 2025-10-29 13:09:21 发布

原创最新推荐文章于 2025-10-29 13:09:21 发布 · 566 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css #javascript

HTML/CSS/JS 专栏收录该内容

2 篇文章

订阅专栏

这是一个关于使用jQuery创建树形标签的示例，包括CSS样式和JavaScript交互。数据以JSON格式组织，用于构建多级树结构，支持折叠和展开节点。组件通过点击事件处理节点的显示和隐藏，并提供了回调函数进行节点状态检查。

样式CSS:


.tree {
    list-style: none;
    /* border-right: solid 1px #e5e5e5; */
    /* border-left: solid 1px #e5e5e5; */
    padding: 0px;
    color: #4d6878;
}

.tree a {
    text-decoration: none;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
}

.tree a:hover {
    background: #f0f7fc;
}

.tree li {
    /*border-left: 1px dashed #a4c2f3;*/
    /*border-bottom: 1px dashed #a4c2f3;*/
    /* box-shadow: 0px 0px 9px #c9c9c9; */
    margin: 2px 0;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

.tree-dir {
    display: block;
    padding: 1px 4px;
    font-size: 15px;
}

.tree-dir > a.tree-dir-title > i {
    padding: 0 10px 0 0;
    color: #de892f;
}


.tree-dir > a.tree-dir-title > i {
    padding: 0 10px 0 0;
    color: #de892f;
}

.tree-dir > ul {
    display: block;
    padding-left: 12px;
    border-left: 1px dashed #67b2dd;
}


.tree-file {
    display: block;
    padding: 1px 4px;
    font-size: 15px;
}

/*.tree .tree-dir:before, */
.tree .tree-file:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 10px;
    left: -8px;
    width: 10px;
    height: 0px;
    border-top: 1px dotted #67b2dd;
    z-index: 1;
}

JS控制:


///////////////////////////////////////////////
/// 树型标签
/// V 1.0
/// creat by revivec
/// 运行库 juqery
/// //////////////////////////////////////////
//  components_map 原生集合
var components_map = {};

;(function ($) {

    var defaults = {
        id: "",
        data: [],
        fold: true,
        multiple: false,
        showIndex: 0,
        check: function () {
        },
        done: function () {
        }
    };
    //$this == defaults 传递的对象
    $.fn.componentTree = function ($this) {
        var $compTree = $("#" + $this.id);
        $compTree.empty();
        var $rootUl = $('<ul class="tree" id="tree_ul_id"></ul>');
        $compTree.append($rootUl);
        $.each($this.data, function (index, value) {
            if (value.level == 0) {
                var $pli;
                if (value.type == 1) {
                    $pli = $('<li class="tree-dir" id="tree_' + value.id + '"><a class="tree-dir-title active"><i class="glyphicon glyphicon-folder-close "></i>' + value.name + '</a><ul></ul></li>');
                } else if (value.type == 2) {
                    $pli = $('<li class="tree-file" id="tree_' + value.id + '"><a><i class="glyphicon glyphicon-file"></i>' + value.name + '</a></li>');
                }

                $rootUl.append($pli);
            }
        });
        $.each($this.data, function (index, value) {
            console.log(value.id);
            console.log(value.pId);
            console.log(value.name);
            console.log(value.open);
            if (value.level > 0) {
                var pliId = "#tree_" + value.pId + ">ul";
                var $pli = $(pliId);
                if ($pli != null && $pli != undefined) {
                    var $li;
                    if (value.type == 1) {
                        $li = $('<li class="tree-dir" id="tree_' + value.id + '" ><a class="tree-dir-title active"><i class="glyphicon glyphicon-folder-close "></i>' + value.name + '</a><ul></ul></li>');
                    } else if (value.type == 2) {
                        $li = $('<li class="tree-file" id="tree_' + value.id + '"><a><i class="glyphicon glyphicon-file"></i>' + value.name + '</a></li>');
                    }
                    if (!value.open) {
                        $pli.css('display', 'none');
                    }
                    $pli.append($li);
                }
            }
        });

        $(".tree-dir > .tree-dir-title").nextAll().hide();
        $(".tree-dir > .tree-dir-title").click(function () {
            $(this).nextAll().toggle();
        });
    }
})(jQuery);

调用Html:

   <div class="panel-body" id="tree_div_id">
        </div>

数据格式:


[
    {"id":1,"name":"长沙","pId":"","open":false,"level":0},
    {"id":2,"name":"天心区","pId":1,"open":false,"level":1},
    {"id":3,"name":"芙蓉区","pId":1,"open":false,"level":1},
    {"id":4,"name":"天心区2","pId":2,"open":false,"level":2},
]

id:自身
pId:父级
name:名称
open:是否打开
level:树层级(0 顶级是必须的,其他可以根据自己需求)

初始化加载:

 $("#tree_div_id").componentTree({
                                id: "tree_div_id",
                                data: data.data,
                                fold: false,
                                multiple: false,
                                check: function (val) {
                                    console.log('chekc:' + val);
                                    console.log($(this).tagTreeValues());
                                },
                                done: function () {
                                    console.log('tagTree is ok!');
                                }
                            });