js实现一个多级树形选择菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：js实现一个多级树形选择菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport">
<style>
    @font-face {font-family: "verTreeIcon";
  src: url('iconfont.eot?t=1532158763268'); /* IE9*/
  src: url('iconfont.eot?t=1532158763268#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1532158763268') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1532158763268#iconfont') format('svg'); /* iOS 4.1- */
}

.verTreeIcon {
  font-family:"verTreeIcon" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-plus:before { content: "\e67c"; }

.icon-gobottom:before { content: "\e65d"; }

.icon-minus:before { content: "\e68b"; }

.icon-check-box-others:before { content: "\e662"; }

.icon-info:before { content: "\e7c5"; }

.icon-menu:before { content: "\e603"; }

.icon-check-box-cicre:before { content: "\e65a"; }

.icon-warning:before { content: "\e68f"; }

.icon-error:before { content: "\e621"; }

.icon-edit-remark:before { content: "\e623"; }

.icon-info-o:before { content: "\e614"; }

.icon-check-box:before { content: "\e600" !important;width: 30px; }

.icon-caret-left:before { content: "\e6cc"; }

.icon-caret-down:before { content: "\e6cd"; }

.icon-caret-right:before { content: "\e6ce"; }

.icon-caret-up:before { content: "\e6d0"; }

.icon-radio-cicre:before { content: "\e677"; }

.icon-gotop:before { content: "\e602"; }

.icon-radio:before { content: "\e66a"; }

.icon-success:before { content: "\e61a"; }

.icon-refresh:before { content: "\e652"; }
.green {
    color: #2ca02c;
}

.red {
    color: #c21;
}

.blue {
    color: #1B9AF7;
}
ul,li,ol{
    list-style: none;
}
.tree-form-box{
    vertical-align: top;
    border-radius: 5px;
    display: inline-block;
}
.tree-form-box .ver-tree-level-0{
    display: inline-block;
    vertical-align: top;
    border: 1px solid #dedede;
    padding: 15px;
}
.tree-form-box .ver-tree-level-0+.ver-tree-level-0{
    margin-left: 5px;
}
i.tree-option{
    cursor: pointer;
}

.ver-tree-levels-show{
    display: block !important;
}
.ver-tree-levels-hide{
    display: none !important;
}

.tree-list{
    width: 100%;
}

.tree-list tbody{
    width: 100%;
}

.tree-list tbody tr{
    width: 100%;
}

children-jsons{
    display: none;
}

.ver-tree-check,.ver-tree-check-all{
    cursor: pointer;
}
</style>

</head>
<body>
<form action="#">
    <ul id="tree_list"></ul>
</form>

<script>
    window.verTree = (function () {
    var tree = function (params) {

        this.tree = document.querySelector(params.items);
        this.tree.classList.add("tree-" + params.type);
        this.data = params.data;
        this.type = params.type ? params.type : "data";
        this.option = params.option ? params.option : "";
        this.pk = params.parent ? params.parent : "parent";
        this.id = params.params ? params.params : "id";
        this.name = params.name ? params.name : "name";
        switch (this.type) {
            case "list":
                this.thead = (this.tree).querySelector('[data-tree-list="true"]');
                this.table_tree();
                break;
            case "form":
                this.items();
                break;
            default:
                this.items();
                break;
        }
    };
    tree.prototype = {
        getPath: function () {
            var jsPath = document.currentScript ? document.currentScript.src : function () {
                var js = document.scripts
                    , last = js.length - 1
                    , src;
                for (var i = last; i > 0; i--) {
                    if (js[i].readyState === 'interactive') {
                        src = js[i].src;
                        break;
                    }
                }
                return src || js[last].src;
            }();
            return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
        }(),
        items: function () {
            this.tree.classList.add("tree-form-box");
            this.tree_data(this.data, 0);
            if (this.type == "form") {
                this.checkInput();
            }
            this.tree_options_list();
        },
        tree_data: function (data, level, cl) {
            var ul = document.createElement("ul");
            var f = level + 1;
            var icons = icon = "";
            for (var i in data) {
                var d = data[i];
                if (d.children.length > 0) {
                    icon = "<i class='verTreeIcon icon-minus green tree-option'></i>";
                }

                if (this.type == "form") {
                    icons = "<span><i class='verTreeIcon icon-check-box blue ver-tree-check ver-tree-checks'></i><input type='checkbox' name='" + this.id + "[]' value='" + d[this.id] + "' style='display: none'></span> "
                }
                var li = document.createElement("li");
                li.setAttribute("data-parent", d[this.pk]);
                li.setAttribute("data-id", d[this.id]);
                li.setAttribute("data-level", level);
                li.innerHTML = icon + icons + d[this.name];
                li.className = "ver-tree-levels ver-tree-level-" + level + " tree-parent-" + d[this.pk];
                ul.appendChild(li);
                if (cl) {
                    cl.appendChild(ul);
                } else {
                    this.tree.appendChild(ul);
                }
                if (d.children.length > 0) {
                    this.tree_data(d.children, f, li);
                }
            }
        },
        /*
         * 表格列表以树形菜单排列
         */
        table_tree: function () {
            var child = this.thead.querySelectorAll("[data-field]");
            var changes = this.thead.getAttribute("data-tree-changes");
            if (changes) {
                var cha = document.createElement("th");
                cha.innerHTML = "<i class='verTreeIcon icon-check-box blue ver-tree-check-all ver-tree-checks'></i>";
                cha.width = 30;
                this.thead.insertBefore(cha, this.thead.children[0])
            }
            var chas = document.createElement("th");
            this.thead.insertBefore(chas, this.thead.children[0]);
            chas.style.width = "5em";
            var html = this.list_item(this.data, child, 0, changes);
            var tbody = document.createElement("tbody");
            tbody.innerHTML = html;
            this.tree.appendChild(tbody);
            this.tree_options_list();
            this.checkInput();
        },
        /*
         * 表格数据处理
         */
        list_item: function (info, child, level, changes, objs) {
            var html = "";
            var l = "";
            if (level > 0) {
                l = "|";
                for (var j = 0; j < level; j++) {
                    l += "——"
                }
            }
            var sel = this;
            for (var i in info) {
                var data = info[i];
                var childs = "";
                var _h = "";
                if (level > 0) {
                    _h = l;
                }
                if (data.children.length > 0) {
                    _h += "<i class='verTreeIcon icon-plus green tree-option'></i>";
                    childs = JSON.stringify(data.children);
                }
                var cl = "";
                if (data[this.pk] > 0) {
                    cl = " tree-parent-" + data[this.pk];
                }
                if (!objs) {
                    html += "<tr class='ver-tree-levels ver-tree-level-" + level + cl + "' data-parent='" + data[this.pk] + "' data-id='" + data[this.id] + "'><td data-levels='" + level + "'>" + _h + "<children-jsons>" + childs + "</children-jsons></td>";
                    if (changes) {
                        html += "<td align='center'><i class='verTreeIcon icon-check-box blue ver-tree-check ver-tree-checks'></i><input type='checkbox' name='" + this.id + "[]' value='" + data[this.id] + "' style='display: none'></td>"
                    }
                    child.forEach(function (item) {
                        var file = item.getAttribute("data-field");
                        html += '<td>' + data[file] + '</td>';
                    });
                    html += "</tr>";
                } else {
                    var te = document.createElement("tr");
                    te.className = "ver-tree-levels ver-tree-level-" + level + cl;
                    te.setAttribute("data-parent", data[this.pk]);
                    te.setAttribute("data-id", data[this.id]);
                    html = "<td data-levels='" + level + "'>" + _h + "<children-jsons>" + childs + "</children-jsons></td>";
                    if (changes) {
                        html += "<td align='center'><i class='verTreeIcon icon-check-box blue ver-tree-check ver-tree-checks'></i><input type='checkbox' name='" + this.id + "[]' value='" + data[this.id] + "' style='display: none'></td>"
                    }
                    child.forEach(function (item) {
                        var file = item.getAttribute("data-field");
                        html += '<td>' + data[file] + '</td>';
                    });
                    te.innerHTML = html;
                    sel.insertAfter(te, objs);
                }
            }

            return html;
        },
        insertAfter: function (newElement, targentElement) {
            var parent = targentElement.parentNode;
            if (parent.lastChild == targentElement) {
                parent.appendChild(newElement);
            } else {
                parent.insertBefore(newElement, targentElement.nextSibling)
            }
        },
        /*
         * 收缩菜单控件
         */
        tree_options_list: function () {
            if (this.type == "list") {
                var child = this.thead.querySelectorAll("[data-field]");
                var changes = this.thead.getAttribute("data-tree-changes");
            }
            var options = this.tree.querySelectorAll(".tree-option");
            var _self = this;
            options.forEach(function (item) {
                item.onclick = function (e) {
                    if (_self.type == "list") {
                        var level = parseInt(this.parentElement.getAttribute("data-levels"));
                        var id = (this.parentElement.parentElement.getAttribute("data-id"));
                        var data = this.parentElement.querySelector("children-jsons").innerHTML;
                        data = JSON.parse(data);
                        var tr = this.parentElement.parentElement;
                        var clss = _self.tree.getElementsByClassName("tree-parent-" + id);
                        //判断当前是否存在icon-plus
                        if (this.classList.contains("icon-plus")) {
                            level = parseInt(level) + 1;
                            _self.list_item(data, child, level, changes, tr);
                            this.classList.remove("icon-plus");
                            this.classList.add("icon-minus");
                            _self.tree_options_list();
                            _self.checkInput();
                        } else {
                            this.classList.add("icon-plus");
                            this.classList.remove("icon-minus");
                            _self.level_tops(id);

                        }
                    } else {
                        // var id = parseInt(this.parentElement.parentElement.getAttribute("data-level"));
                        var ul = (this.parentElement.querySelector("ul"));
                        if(this.classList.contains("icon-plus")){
                            this.classList.remove("icon-plus");
                            this.classList.add("icon-minus");
                            ul.classList.remove("ver-tree-levels-hide");
                        }else{
                            this.classList.add("icon-plus");
                            this.classList.remove("icon-minus");
                            ul.classList.add("ver-tree-levels-hide");
                        }
                    }
                }
            });
        },
        /*
         * 全选&反选
         */
        checkInput: function () {
            var inputs = this.tree.querySelectorAll(".ver-tree-checks"),
                _self = this;
            inputs.forEach(function (item) {
                item.onclick = function () {
                    if (_self.type == "list") {
                        var ins = _self.tree.querySelectorAll(".ver-tree-check"),
                            all = _self.tree.querySelector(".ver-tree-check-all");
                        //判断是否是选中状态；
                        if (this.classList.contains("icon-check-box-cicre")) {
                            this.classList.add("icon-check-box");
                            this.classList.remove("icon-check-box-cicre");
                            //判断是全选还是单选
                            if (this.classList.contains("ver-tree-check-all")) {
                                ins.forEach(function (it) {
                                    it.classList.add("icon-check-box");
                                    it.classList.remove("icon-check-box-cicre");
                                    it.parentElement.querySelector("input[type=checkbox]").checked = false;
                                });
                            } else {
        .........完整代码请登录后点击上方下载按钮下载查看