美文网首页
jQuery+Bootstrap手写树形菜单

jQuery+Bootstrap手写树形菜单

作者: 易冷zzz | 来源:发表于2020-03-20 17:37 被阅读0次

    手写树形结构菜单并实现点击的交互效果

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <!--Bootstrap.css -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                html{
                    padding: 20px;
                }
                .row{
                    margin: 20px 0;
                }
                .row label{
                    line-height: 30px;
                    margin: 0;
                    text-align: right;
                    font-weight: normal;
                }
                .text-left {
                    text-align: left;
                }
                .text-right {
                    text-align: right;
                }
                .no-padding {
                    padding: 0 !important;
                }
                .no-padding-left {
                    padding-left: 0 !important;
                }
                .padding-20 {
                    padding: 20px;
                }
                .no-margin {
                    margin: 0 !important;
                }
                .modal-open {
                    overflow: hidden;
                    padding: 0 !important;
                }
                
                .tree-data ul>li{
                    padding-left: 30px;
                    list-style: none;
                }
                .tree-data li > span{
                    margin: 0;
                    font-weight: normal;
                    cursor: pointer;
                }
                .tree-data li > span input[type=checkbox]{
                    cursor: pointer;
                }
    
            </style>
        </head>
        <body>
            <div class="tree-data" id="tree"></div>
            <button type="button" class="btn btn-sm btn-primary" id="submit">提交</button>
            <!-- jQuery依赖 -->
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <!-- Bootstrap.js -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <script type="text/javascript">
                $(function () {
                    let res = {"data":[{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_0101","leaf":true,"parentId":"atap_01","text":"参与的项目"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_0102","leaf":true,"parentId":"atap_01","text":"创建的项目"}],"disabled":false,"expanded":false,"id":"atap_01","leaf":false,"text":"我的项目"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_0203","leaf":true,"parentId":"atap_02","text":"删除项目"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_0204","leaf":true,"parentId":"atap_02","text":"项目详情"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_0201","leaf":true,"parentId":"atap_02","text":"查询项目"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_0202","leaf":true,"parentId":"atap_02","text":"创建编辑"}],"disabled":false,"expanded":false,"id":"atap_02","leaf":false,"text":"项目管理"},{"checked":false,"children":[{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_030201","leaf":true,"parentId":"atap_0302","text":"查询用例"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030202","leaf":true,"parentId":"atap_0302","text":"上传用例"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030203","leaf":true,"parentId":"atap_0302","text":"用例详情"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030204","leaf":true,"parentId":"atap_0302","text":"下载用例"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030205","leaf":true,"parentId":"atap_0302","text":"拷贝用例"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030206","leaf":true,"parentId":"atap_0302","text":"删除用例"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030207","leaf":true,"parentId":"atap_0302","text":"批量删除"}],"disabled":false,"expanded":false,"id":"atap_0302","leaf":false,"parentId":"atap_03","text":"用例管理"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_030301","leaf":true,"parentId":"atap_0303","text":"任务新建"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030302","leaf":true,"parentId":"atap_0303","text":"任务复制"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030303","leaf":true,"parentId":"atap_0303","text":"任务删除"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030304","leaf":true,"parentId":"atap_0303","text":"任务监控"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030305","leaf":true,"parentId":"atap_0303","text":"任务停止"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030306","leaf":true,"parentId":"atap_0303","text":"任务重启"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030307","leaf":true,"parentId":"atap_0303","text":"报告下载"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030308","leaf":true,"parentId":"atap_0303","text":"任务评分"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030309","leaf":true,"parentId":"atap_0303","text":"查看报告"}],"disabled":false,"expanded":false,"id":"atap_0303","leaf":false,"parentId":"atap_03","text":"任务管理"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_030101","leaf":true,"parentId":"atap_0301","text":"查询应用"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030102","leaf":true,"parentId":"atap_0301","text":"添加应用"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030103","leaf":true,"parentId":"atap_0301","text":"删除应用"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030104","leaf":true,"parentId":"atap_0301","text":"批量删除"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030105","leaf":true,"parentId":"atap_0301","text":"下载应用"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030106","leaf":true,"parentId":"atap_0301","text":"更新参数"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030107","leaf":true,"parentId":"atap_0301","text":"查询参数"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_030109","leaf":true,"parentId":"atap_0301","text":"开始测试"}],"disabled":false,"expanded":false,"id":"atap_0301","leaf":false,"parentId":"atap_03","text":"应用管理"}],"disabled":false,"expanded":false,"id":"atap_03","leaf":false,"text":"测试管理"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_0418","leaf":true,"parentId":"atap_04","text":"导入脚本步骤"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_0401","leaf":true,"parentId":"atap_04","text":"查询真机"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_0404","leaf":true,"parentId":"atap_04","text":"操控真机"}],"disabled":false,"expanded":false,"id":"atap_04","leaf":false,"text":"远程真机"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_0501","leaf":true,"parentId":"atap_05","text":"指标修改"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_0504","leaf":true,"parentId":"atap_05","text":"安全指标"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_0502","leaf":true,"parentId":"atap_05","text":"兼容性指标"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_0503","leaf":true,"parentId":"atap_05","text":"性能指标"}],"disabled":false,"expanded":false,"id":"atap_05","leaf":false,"text":"指标管理"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_0601","leaf":true,"parentId":"atap_06","text":"统计分析"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_060201","leaf":true,"parentId":"atap_0602","text":"查询终端"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_060202","leaf":true,"parentId":"atap_0602","text":"任务列表"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_060203","leaf":true,"parentId":"atap_0602","text":"导出信息"}],"disabled":false,"expanded":false,"id":"atap_0602","leaf":false,"parentId":"atap_06","text":"终端数据"}],"disabled":false,"expanded":false,"id":"atap_06","leaf":false,"text":"数据分析"},{"checked":true,"children":[{"checked":true,"children":[{"checked":true,"disabled":false,"expanded":false,"id":"atap_070201","leaf":true,"parentId":"atap_0702","text":"查询测试卡"},{"checked":true,"disabled":false,"expanded":false,"id":"atap_070202","leaf":true,"parentId":"atap_0702","text":"添加测试卡"},{"checked":true,"disabled":false,"expanded":false,"id":"atap_070203","leaf":true,"parentId":"atap_0702","text":"修改测试卡"},{"checked":true,"disabled":false,"expanded":false,"id":"atap_070204","leaf":true,"parentId":"atap_0702","text":"删除测试卡"},{"checked":true,"disabled":false,"expanded":false,"id":"atap_070205","leaf":true,"parentId":"atap_0702","text":"批量导入"},{"checked":true,"disabled":false,"expanded":false,"id":"atap_070206","leaf":true,"parentId":"atap_0702","text":"测试卡详情"}],"disabled":false,"expanded":false,"id":"atap_0702","leaf":false,"parentId":"atap_07","text":"测试卡管理"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_070301","leaf":true,"parentId":"atap_0703","text":"查询连接器"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_070302","leaf":true,"parentId":"atap_0703","text":"下线"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_070303","leaf":true,"parentId":"atap_0703","text":"查看信息"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_070304","leaf":true,"parentId":"atap_0703","text":"查看关联设备"}],"disabled":false,"expanded":false,"id":"atap_0703","leaf":false,"parentId":"atap_07","text":"连接器管理"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"atap_070101","leaf":true,"parentId":"atap_0701","text":"测试机列表"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_070102","leaf":true,"parentId":"atap_0701","text":"收藏真机"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_070116","leaf":true,"parentId":"atap_0701","text":"测试机详情"},{"checked":false,"disabled":false,"expanded":false,"id":"atap_070117","leaf":true,"parentId":"atap_0701","text":"修改测试机"}],"disabled":false,"expanded":false,"id":"atap_0701","leaf":false,"parentId":"atap_07","text":"测试机管理"}],"disabled":false,"expanded":false,"id":"atap_07","leaf":false,"text":"资源管理"},{"checked":true,"children":[{"checked":true,"children":[{"checked":true,"disabled":false,"expanded":false,"id":"wb_030108","leaf":true,"parentId":"wb_030101","relation":"wb_030102","text":"启用/禁用用户"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_030118","leaf":true,"parentId":"wb_030101","relation":"wb_030102","text":"重置密码"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_030122","leaf":true,"parentId":"wb_030101","relation":"wb_030102","text":"导出用户信息"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_030123","leaf":true,"parentId":"wb_030101","relation":"wb_030102","text":"导出用户权限信息"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_030124","leaf":true,"parentId":"wb_030101","relation":"wb_030102","text":"新增成员"},{"checked":false,"disabled":false,"expanded":false,"id":"wb_030125","leaf":true,"parentId":"wb_030101","relation":"wb_030102","text":"解锁锁定用户"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_030102","leaf":true,"parentId":"wb_030101","text":"查询"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_030103","leaf":true,"parentId":"wb_030101","relation":"wb_030102","text":"编辑成员"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_030105","leaf":true,"parentId":"wb_030101","relation":"wb_030102","text":"删除成员"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_030106","leaf":true,"parentId":"wb_030101","relation":"wb_030102","text":"账号配置角色"}],"disabled":false,"expanded":false,"id":"wb_030101","leaf":false,"parentId":"wb_02","text":"系统成员管理"},{"checked":true,"children":[{"checked":true,"disabled":false,"expanded":false,"id":"wb_040107","leaf":true,"parentId":"wb_040101","relation":"wb_040103","text":"角色分配权限"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_040111","leaf":true,"parentId":"wb_040101","relation":"wb_040103","text":"角色导出"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_040105","leaf":true,"parentId":"wb_040101","relation":"wb_040103","text":"编辑角色"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_040106","leaf":true,"parentId":"wb_040101","relation":"wb_040103","text":"删除角色"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_040103","leaf":true,"parentId":"wb_040101","text":"查询"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_040104","leaf":true,"parentId":"wb_040101","relation":"wb_040103","text":"新增角色"}],"disabled":false,"expanded":false,"id":"wb_040101","leaf":false,"parentId":"wb_02","text":"系统角色管理"},{"checked":true,"children":[{"checked":true,"disabled":false,"expanded":false,"id":"wb_020103","leaf":true,"parentId":"wb_020101","text":"查询"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_02010301","leaf":true,"parentId":"wb_020101","relation":"wb_020103","text":"导出机构信息"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_020104","leaf":true,"parentId":"wb_020101","relation":"wb_020103","text":"新增组织"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_020108","leaf":true,"parentId":"wb_020101","relation":"wb_020103","text":"账号配置角色"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_020105","leaf":true,"parentId":"wb_020101","relation":"wb_020103","text":"编辑组织"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_020106","leaf":true,"parentId":"wb_020101","relation":"wb_020103","text":"删除组织"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_020120","leaf":true,"parentId":"wb_020101","relation":"wb_020103","text":"新增成员"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_020118","leaf":true,"parentId":"wb_020101","relation":"wb_020103","text":"编辑部门"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_020119","leaf":true,"parentId":"wb_020101","relation":"wb_020103","text":"删除部门"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_020117","leaf":true,"parentId":"wb_020101","relation":"wb_020103","text":"新增部门"}],"disabled":false,"expanded":false,"id":"wb_020101","leaf":false,"parentId":"wb_02","text":"机构管理"},{"checked":true,"children":[{"checked":true,"disabled":false,"expanded":false,"id":"wb_090108","leaf":true,"parentId":"wb_090101","relation":"wb_090102","text":"账号配置角色"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_090102","leaf":true,"parentId":"wb_090101","text":"获取组织所属角色和用户信息"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_090120","leaf":true,"parentId":"wb_090101","relation":"wb_090102","text":"新增成员"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_090118","leaf":true,"parentId":"wb_090101","relation":"wb_090102","text":"编辑部门"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_090117","leaf":true,"parentId":"wb_090101","relation":"wb_090102","text":"新增部门"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_090119","leaf":true,"parentId":"wb_090101","relation":"wb_090102","text":"删除部门"}],"disabled":false,"expanded":false,"id":"wb_090101","leaf":false,"parentId":"wb_02","text":"部门管理"},{"checked":true,"children":[{"checked":true,"disabled":false,"expanded":false,"id":"wb_100106","leaf":true,"parentId":"wb_100101","relation":"wb_100102","text":"账号配置角色"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_100105","leaf":true,"parentId":"wb_100101","relation":"wb_100102","text":"删除成员"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_100108","leaf":true,"parentId":"wb_100101","relation":"wb_100102","text":"启用/禁用用户"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_100103","leaf":true,"parentId":"wb_100101","relation":"wb_100102","text":"编辑成员"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_100102","leaf":true,"parentId":"wb_100101","text":"查询"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_100118","leaf":true,"parentId":"wb_100101","relation":"wb_100102","text":"重置密码"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_100119","leaf":true,"parentId":"wb_100101","relation":"wb_100102","text":"新增用户信息"},{"checked":false,"disabled":false,"expanded":false,"id":"wb_100124","leaf":true,"parentId":"wb_100101","relation":"wb_100102","text":"解锁锁定用户"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_100123","leaf":true,"parentId":"wb_100101","relation":"wb_100102","text":"导出用户权限信息"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_100122","leaf":true,"parentId":"wb_100101","relation":"wb_100102","text":"导出用户信息"}],"disabled":false,"expanded":false,"id":"wb_100101","leaf":false,"parentId":"wb_02","text":"成员管理"},{"checked":true,"children":[{"checked":true,"disabled":false,"expanded":false,"id":"wb_070104","leaf":true,"parentId":"wb_070101","relation":"wb_070103","text":"新增角色"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_070105","leaf":true,"parentId":"wb_070101","relation":"wb_070103","text":"编辑角色"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_070106","leaf":true,"parentId":"wb_070101","relation":"wb_070103","text":"删除角色"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_070107","leaf":true,"parentId":"wb_070101","relation":"wb_070103","text":"角色分配权限"},{"checked":true,"disabled":false,"expanded":false,"id":"wb_070103","leaf":true,"parentId":"wb_070101","text":"查询"}],"disabled":false,"expanded":false,"id":"wb_070101","leaf":false,"parentId":"wb_02","text":"角色管理"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"wb_050103","leaf":true,"parentId":"wb_050101","text":"查询"}],"disabled":false,"expanded":false,"id":"wb_050101","leaf":false,"parentId":"wb_02","text":"日志管理"},{"checked":false,"children":[{"checked":false,"disabled":false,"expanded":false,"id":"wb_080109","leaf":true,"parentId":"wb_080101","relation":"wb_080107","text":"导出查询条件下资源历史"},{"checked":false,"disabled":false,"expanded":false,"id":"wb_080107","leaf":true,"parentId":"wb_080101","text":"获取资源历史列表"},{"checked":false,"disabled":false,"expanded":false,"id":"wb_080106","leaf":true,"parentId":"wb_080101","text":"获取资源列表"},{"checked":false,"disabled":false,"expanded":false,"id":"wb_080105","leaf":true,"parentId":"wb_080101","relation":"wb_080106","text":"删除资源"},{"checked":false,"disabled":false,"expanded":false,"id":"wb_080104","leaf":true,"parentId":"wb_080101","relation":"wb_080106","text":"修改资源"},{"checked":false,"disabled":false,"expanded":false,"id":"wb_080103","leaf":true,"parentId":"wb_080101","relation":"wb_080106","text":"添加资源"},{"checked":false,"disabled":false,"expanded":false,"id":"wb_080110","leaf":true,"parentId":"wb_080101","relation":"wb_080106","text":"导出查询条件下资源"}],"disabled":false,"expanded":false,"id":"wb_080101","leaf":false,"parentId":"wb_02","text":"资源管理"},{"checked":true,"disabled":false,"expanded":false,"id":"atap_0801","leaf":true,"parentId":"wb_02","text":"告警管理"}],"disabled":false,"expanded":false,"id":"wb_02","leaf":false,"text":"系统管理"}],"status":"200"}
                    loadDept(res.data, 'auth', 'tree')
                    
                    //获取选中的节点id
                    $("#submit").on('click', function(){
                        $("#tree").find('input[type=checkbox]:checked').each(function(){
                            console.log($(this).val())
                        })
                    })
                })
                function loadDept (dataSource, name, treeId) {
                    let treeStr = '';
                    let treeStr1 = '';
                    dataSource.map(function (item1, i) {
                        if(!item1.leaf){
                            let treeStr2 = '';
                            item1.children.map(function(item2, i){
                                if(!item2.leaf){
                                    let treeStr3 = '';
                                    item2.children.map(function(item3, k){
                                        if(!item3.leaf){
                                            let treeStr4 = '';
                                            item3.children.map(function(item4, m){
                                                treeStr4 += `<li class="level4" data-id="${item4.id}" data-parentId="${item4.parentId}"><span><input type="checkbox" value="${item4.id}" name="${name}" />&nbsp;${item4.text}</span></li>`;
                                            })
                                            treeStr3 += `<li class="level3" data-id="${item3.id}" data-parentId="${item3.parentId}"><span><i class="glyphicon glyphicon glyphicon-menu-down"></i>&nbsp;<input type="checkbox" value="${item3.id}" name="${name}" />&nbsp;${item3.text}</span><ul>${treeStr4}</ul></li>`;
                                        }else{
                                            treeStr3 += `<li class="level3" data-id="${item3.id}" data-parentId="${item3.parentId}"><span><input type="checkbox" value="${item3.id}" name="${name}" />&nbsp;${item3.text}</span></li>`;
                                        }
                                    })
                                    treeStr2 += `<li class="level2" data-id="${item2.id}" data-parentId="${item2.parentId}"><span><i class="glyphicon glyphicon glyphicon-menu-down"></i>&nbsp;<input type="checkbox" value="${item2.id}" name="${name}" />&nbsp;${item2.text}</span><ul>${treeStr3}</ul></li>`;
                                }else{
                                    treeStr2 += `<li class="level2" data-id="${item2.id}" data-parentId="${item2.parentId}"><span><input type="checkbox" value="${item2.id}" name="${name}" />&nbsp;${item2.text}</span></li>`;
                                }
                            })
                            treeStr1 += `<li class="level1" data-id="${item1.id}" data-parentId="${item1.parentId}"><span><i class="glyphicon glyphicon glyphicon-menu-down"></i>&nbsp;<input type="checkbox" value="${item1.id}" name="${name}" />&nbsp;${item1.text}</span><ul>${treeStr2}</ul></li>`;
                        }else{
                            treeStr1 += `<li class="level1" data-id="${item1.id}" data-parentId="${item1.parentId}"><span><input type="checkbox" value="${item1.id}" name="${name}" />&nbsp;${item1.text}</span></li>`;
                        }
                    })
                    treeStr = `<ul>${treeStr1}</ul>`;
                    $("#" + treeId).html(treeStr);
                    
                    //关联子菜单
                    $("#" + treeId).on('click', 'input[type=checkbox]', function(e){
                        e.stopPropagation()
                        if(this.checked){
                            $(this).parent().siblings('ul').find('input[type=checkbox]').prop('checked', true)
                            
                            if($(this).closest('ul').find('li input[type=checkbox]:checked').length === $(this).closest('ul').find('input[type=checkbox]').length){
                                $(this).closest('ul').siblings('span').find('input[type=checkbox]').prop('checked', true)
                            }
                        }else{
                            $(this).parent().siblings('ul').find('input[type=checkbox]').prop('checked', false)
                            $(this).closest('ul').siblings('span').find('input[type=checkbox]').prop('checked', false)
                        }
                    })
                    //树节点点击效果
                    $("#" + treeId).on('click', 'span', function(){
                        if($(this).find('i').hasClass('glyphicon glyphicon-menu-down')){
                            $(this).find('i').removeClass('glyphicon glyphicon-menu-down').addClass('glyphicon glyphicon-menu-right');
                        }else if($(this).find('i').hasClass('glyphicon glyphicon-menu-right')){
                            $(this).find('i').removeClass('glyphicon glyphicon-menu-right').addClass('glyphicon glyphicon-menu-down');
                        }
                        if($(this).siblings('ul').is(':hidden')){
                            $(this).siblings('ul').slideDown(500);
                        }else{
                            $(this).siblings('ul').slideUp(500);
                        }
                    })
                }
            </script>
        </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:jQuery+Bootstrap手写树形菜单

          本文链接:https://www.haomeiwen.com/subject/orxsyhtx.html