原生jquery实现根据后台json数据动态生成的侧边栏

其他 2021-03-02 06:23:03 阅读次数: 0 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #ctnUIAccordion{
     
     
            width: 200px;


        }
        #ctnUIAccordion .panel{
     
     
            background-color: #393d49;

        }
        #ctnUIAccordion .panel > span{
     
     
            background-color: #393d49;
            display:block;
            height:45px;
            width: 160px;
            padding-left:20px;
            padding-right:20px;
            text-align: left;
            line-height:45px;
            color:#b8b8ba;
            font-size: 4mm;
        }
        #ctnUIAccordion .panel > span:hover{
     
     
            background-color: #4e5465;
            color:#ffffff;

        }
        #ctnUIAccordion .panel .innerPanel2 > span{
     
     
            background-color: #282b33;   /*#1c1e24;*/
            width:180px;
            height:40px;
            margin-left:10px;
            text-align: left;
            line-height:40px;
            display:block;
            color:#b8b8ba;
            padding-left:10px;
            font-size: 4mm;

        }
        #ctnUIAccordion .panel .innerPanel2 > span:hover{
     
     
            color:#ffffff;
        }
        #ctnUIAccordion .panel .innerPanel3{
     
     
            height:36px;
            width:170px;
            background-color: #1c1e24;
            margin-left:10px;
            text-align: left;
            line-height:36px;
            color:#b8b8ba;
            padding-left:10px;
            font-size: 4mm;
            border-left:10px solid #282b33;
        }
        #ctnUIAccordion .panel .innerPanel3:hover{
     
     
            color:#ffffff;
        }



         #ctnUIAccordion .panel{
     
     
             overflow: hidden;
             height:45px;
             transition:all 0.5s;
             -moz-transition:height 0.5s;
             -webkit-transition:height 0.5s;
             -o-transition:height 0.5s;
         }
        #ctnUIAccordion .innerPanel2{
     
     
            overflow: hidden;
            height:40px;
            transition:all 0.5s;
            -moz-transition:height 0.5s;
            -webkit-transition:height 0.5s;
            -o-transition:height 0.5s;
        }
    </style>
</head>
<body>
    <div id="ctnUIAccordion">
        <!--荷载模块-->


    </div>

<script src="js/jquery.min.js"></script>
<script>
    var panel    =[
        {
     
     
            "CREATE_DATE": "2012-10-26T00:00:00",
            "CREATOR": "fc2bab65-3bcb-4bf8-a71c-2f3b71d2ed85",
            "EDITOR": "fc2bab65-3bcb-4bf8-a71c-2f3b71d2ed85",
            "IS_FRAME": null,
            "IS_SHOW": "10",
            "IS_VALID": "10",
            "MENU_CODE": "XT_QXGLXT",
            "MENU_NAME": "权限管理系统",
            "MENU_TYPE": "10",
            "MODIFIED_DATE": "2019-08-06T16:07:59",
            "ORDERNUM": 4,
            "PARENT_UUID": "eb0b053d-ed00-4b8b-9e53-b7e5dd35bfdd",
            "REMARK": "权限管理系统模块",
            "URL": "#",
            "USER_TYPE": "SYS",
            "UUID": "9174b1bc-2e2f-4de6-9e4e-00ac1970f471",
            "subCode": null
        },
        {
     
     
            "CREATE_DATE": "2012-12-01T00:00:00",
            "CREATOR": "fc2bab65-3bcb-4bf8-a71c-2f3b71d2ed85",
            "EDITOR": null,
            "IS_FRAME": null,
            "IS_SHOW": "10",
            "IS_VALID": "10",
            "MENU_CODE": "XT_JCXXGL",
            "MENU_NAME": "基础信息管理",
            "MENU_TYPE": "10",
            "MODIFIED_DATE": null,
            "ORDERNUM": 19,
            "PARENT_UUID": "eb0b053d-ed00-4b8b-9e53-b7e5dd35bfdd",
            "REMARK": null,
            "URL": "#",
            "USER_TYPE": "SYS",
            "UUID": "96dca8ef-d7ff-4116-955c-9a88f7c9b500",
            "subCode": null
        },
        {
     
     
            "CREATE_DATE": "2015-03-10T00:00:00",
            "CREATOR": "fc2bab65-3bcb-4bf8-a71c-2f3b71d2ed85",
            "EDITOR": null,
            "IS_FRAME": "0",
            "IS_SHOW": "10",
            "IS_VALID": "10",
            "MENU_CODE": "XT_ZSK",
            "MENU_NAME": "知识库",
            "MENU_TYPE": "10",
            "MODIFIED_DATE": null,
            "ORDERNUM": 122,
            "PARENT_UUID": "eb0b053d-ed00-4b8b-9e53-b7e5dd35bfdd",
            "REMARK": null,
            "URL": "#",
            "USER_TYPE": "SYS",
            "UUID": "8ebdbb12831448bdbb094f3ac81b81dd",
            "subCode": null
        },
        {
     
     
            "CREATE_DATE": "2020-05-27T16:13:09",
            "CREATOR": "fc2bab65-3bcb-4bf8-a71c-2f3b71d2ed85",
            "EDITOR": "fc2bab65-3bcb-4bf8-a71c-2f3b71d2ed85",
            "IS_FRAME": "0",
            "IS_SHOW": "10",
            "IS_VALID": "10",
            "MENU_CODE": "XT_NZWGL",
            "MENU_NAME": "农产品管理",
            "MENU_TYPE": "10",
            "MODIFIED_DATE": "2020-08-28T11:20:48",
            "ORDERNUM": 181,
            "PARENT_UUID": "eb0b053d-ed00-4b8b-9e53-b7e5dd35bfdd",
            "REMARK": null,
            "URL": "#",
            "USER_TYPE": "SYS",
            "UUID": "1fde0502ebbb463c99267e3540e3632d",
            "subCode": null
        },
        {
     
     
            "CREATE_DATE": "2012-12-04T00:00:00",
            "CREATOR": "fc2bab65-3bcb-4bf8-a71c-2f3b71d2ed85",
            "EDITOR": null,
            "IS_FRAME": null,
            "IS_SHOW": "10",
            "IS_VALID": "10",
            "MENU_CODE": "XT_GRXXWH",
            "MENU_NAME": "个人信息维护",
            "MENU_TYPE": "10",
            "MODIFIED_DATE": null,
            "ORDERNUM": 202,
            "PARENT_UUID": "eb0b053d-ed00-4b8b-9e53-b7e5dd35bfdd",
            "REMARK": null,
            "URL": "#",
            "USER_TYPE": "SYS",
            "UUID": "2be2c760-128c-450b-9872-3f15982a73fb",
            "subCode": null
        },
        {
     
     
            "CREATE_DATE": "2013-03-21T00:00:00",
            "CREATOR": "fc2bab65-3bcb-4bf8-a71c-2f3b71d2ed85",
            "EDITOR": null,
            "IS_FRAME": null,
            "IS_SHOW": "10",
            "IS_VALID": "10",
            "MENU_CODE": "XT_RZGL",
            "MENU_NAME": "日志管理",
            "MENU_TYPE": "10",
            "MODIFIED_DATE": null,
            "ORDERNUM": 324,
            "PARENT_UUID": "eb0b053d-ed00-4b8b-9e53-b7e5dd35bfdd",
            "REMARK": null,
            "URL": "#",
            "USER_TYPE": "SYS",
            "UUID": "5b6644e3-1dad-4033-aeb0-f836c53db37f",
            "subCode": null
        }
    ]

    var panelData = [
        {
     
     
            "id": "9174b1bc-2e2f-4de6-9e4e-00ac1970f471",
            "systemTree":[{
     
     "id":"18be9622-91e0-41a0-8659-2d4fa0d1aac5","pId":"9174b1bc-2e2f-4de6-9e4e-00ac1970f471","name":"权限管理","href":"","target":"rightFrame","isFrame":"1","iconSkin":"pIcon"},{
     
     "id":"f478656f-7175-4dc0-aa72-b253a456b271","pId":"18be9622-91e0-41a0-8659-2d4fa0d1aac5","name":"业务模块维护","href":"manager/sysmodule?code=XT_QXGLXT_QXGL_YWMKWH","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"},{
     
     "id":"36e882f0-5277-41c5-a27d-88d03478bbc9","pId":"9174b1bc-2e2f-4de6-9e4e-00ac1970f471","name":"角色管理","href":"","target":"rightFrame","isFrame":"1","iconSkin":"pIcon"},{
     
     "id":"4a9c14c4-69a7-4727-8afa-805b8f9232df","pId":"36e882f0-5277-41c5-a27d-88d03478bbc9","name":"角色维护","href":"manager/sysrole?code=XT_QXGLXT_JSGL_JSWH","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"},{
     
     "id":"b6e72265-882c-43c5-8f6a-7da8d955985a","pId":"9174b1bc-2e2f-4de6-9e4e-00ac1970f471","name":"用户管理","href":"","target":"rightFrame","isFrame":"1","iconSkin":"pIcon"},{
     
     "id":"05626481-eafb-48e5-82ed-7b1fccebfbe8","pId":"b6e72265-882c-43c5-8f6a-7da8d955985a","name":"用户维护","href":"manager/sysuser?code=XT_QXGLXT_YHGL_YHWH","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"}]        },
        {
     
     
            "id": "96dca8ef-d7ff-4116-955c-9a88f7c9b500",
            "systemTree": [{
     
     "id":"205ea1a9-a592-47ec-8d50-5108e826126a","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"系统字典","href":"manager/sysDict?code=XT_JCXXGL_XTZD","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"},{
     
     "id":"1834b54f-c31c-4730-82f3-42bba3e85f9a","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"园区维护","href":"register/c001?code=XT_JCXXGL_QYDJ","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"},{
     
     "id":"c44785da-acd3-4c5d-842d-b9ca5c137da2","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"政府机构维护","href":"gov/c002?code=XT_JCXXGL_ZFJGDJ","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"},{
     
     "id":"6f959eacc8d746e5a0e3c2f6da6a34e7","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"园区数据曲线","href":"s/argHisdata/index?code=XT_JCXXGL_YQSJQX","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"},{
     
     "id":"750111b6cedb47f2999b244022744ae0","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"植保设备管理","href":"s/dtEppoDev/index?code=XT_JCXXGL_ZBSBGL","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"},{
     
     "id":"ba006c9364254ec3ae60b5574f3acb8d","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"土肥设备管理","href":"s/dtSoilFertilizerDev/index?code=XT_JCXXGL_TFSBGL","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"},{
     
     "id":"8e5eb1f343864e1c97e9d60b6f7afbbc","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"OneNet设备管理","href":"s/dtOneNetDev/index?code=XT_JCXXGL_SBGL","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"},{
     
     "id":"69776f20737045e8856988d2f238cd79","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"数据流类型","href":"s/dtSenType/index?code=XT_JCXXGL_SJLLX","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"},{
     
     "id":"51baaa1761a9429492f63d6e866279f4","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"控制设备管理","href":"s/dtControlDev/index?code=XT_JCXXGL_KZSBGL","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"},{
     
     "id":"ad8eee92-f509-406e-9d37-340a3fdf9390","pId":"96dca8ef-d7ff-4116-955c-9a88f7c9b500","name":"国民经济行业类型","href":"corpinfo/c007?code=XT_JCXXGL_GMJJHYLX","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"}]
        },
        {
     
     
            "id": "8ebdbb12831448bdbb094f3ac81b81dd",
            "systemTree": [{
     
     "id":"5c6cabc9bac24b558adee920758b0475","pId":"8ebdbb12831448bdbb094f3ac81b81dd","name":"信息反馈维护","href":"s/advise/index?code=XT_ZSK_XXFKWH","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"},{
     
     "id":"2731bdb698374a41ae22b4e6573b4205","pId":"8ebdbb12831448bdbb094f3ac81b81dd","name":"内容分类维护","href":"s/contentcategory/index?code=XT_ZSK_NCFLWH","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"},{
     
     "id":"90cc5f01ab8842409cd1282fec5c7c8b","pId":"8ebdbb12831448bdbb094f3ac81b81dd","name":"内容维护","href":"s/content/index?code=XT_ZSK_NCWH","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"}]
        },
        {
     
     
            "id": "1fde0502ebbb463c99267e3540e3632d",
            "systemTree": [{
     
     "id":"4934030e9fe4416dae46a9e63faab6f2","pId":"1fde0502ebbb463c99267e3540e3632d","name":"产品类型","href":"s/dtCropSpecies/index?code=XT_NZWGL_ZWLX","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"},{
     
     "id":"7a962341391b490488d64f1d11dc5128","pId":"1fde0502ebbb463c99267e3540e3632d","name":"产品管理","href":"s/dtCrop/index?code=XT_NZWGL_ZZWGL","target":"rightFrame","isFrame":"0","iconSkin":"cIcon"}]
        },
        {
     
     
            "id": "2be2c760-128c-450b-9872-3f15982a73fb",
            "systemTree": [{
     
     "id":"a2b47d9c-7c31-4f5b-8e79-4aed71245028","pId":"2be2c760-128c-450b-9872-3f15982a73fb","name":"个人信息修改","href":"manager/userinfo?code=XT_GRXXWH_GRXXXG","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"},{
     
     "id":"62f9c3e0-0d81-4a36-a95a-a00db960a939","pId":"2be2c760-128c-450b-9872-3f15982a73fb","name":"个人密码修改","href":"manager/userpasswordinfo?code=XT_GRXXWH_GRMMXG","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"}]
        },
        {
     
     
            "id": "5b6644e3-1dad-4033-aeb0-f836c53db37f",
            "systemTree": [{
     
     "id":"70d8f3cd-2553-447d-a2cd-8fa4b28a3a16","pId":"5b6644e3-1dad-4033-aeb0-f836c53db37f","name":"操作日志","href":"log/operLog?code=XT_RZGL_CZRZ","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"},{
     
     "id":"fb07a9f4-6bdc-40b9-99e3-c964e29cfe9d","pId":"5b6644e3-1dad-4033-aeb0-f836c53db37f","name":"异常日志","href":"log/exceptionLog?code=XT_RZGL_YCRZ","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"},{
     
     "id":"fefcae53-8dc7-4c52-95e7-d810fa9b356d","pId":"5b6644e3-1dad-4033-aeb0-f836c53db37f","name":"登录日志","href":"log/loginLog?code=XT_RZGL_DLRZ","target":"rightFrame","isFrame":"1","iconSkin":"cIcon"}]
        }
    ]



        /*构造最外层面板，对应class = .panel的div*/
        for(var i =0 ;i<panel.length ;i++){
     
     
            $("#ctnUIAccordion").append(
                    $("<div></div>").attr("class","panel")
                        .append(
                            $("<span></span>").append(panel[i].MENU_NAME)
                        )
                                    .append(
                                          $("<div></div>").attr("class","innerPanel")
                                    )
            )
        }
        /*构造完最外层的面板后，向每个面板中添加内容*/
        $("#ctnUIAccordion .panel").each(function (index,ele) {
     
     

            /*每个面板要对应一条数组数据，根据这条数据像其中添加内容*/
            /*数据形如
            [
                {
                    "id":"18be9622-91e0-41a0-8659-2d4fa0d1aac5",
                    "pId":"9174b1bc-2e2f-4de6-9e4e-00ac1970f471",
                    "name":"权限管理",
                    "href":"",
                    "target":"rightFrame",
                    "isFrame":"1",
                    "iconSkin":"pIcon"
                },
                {
                    "id":"f478656f-7175-4dc0-aa72-b253a456b271",
                    "pId":"18be9622-91e0-41a0-8659-2d4fa0d1aac5",
                    "name":"业务模块维护",
                    "href":"manager/sysmodule?code=XT_QXGLXT_QXGL_YWMKWH",
                    "target":"rightFrame",
                    "isFrame":"1",
                    "iconSkin":"cIcon"
                },...
            ]
              */
            var data = panelData[index].systemTree

            for(var i =0 ;i<data.length ;i++){
     
     
                if(data[i].pId==panelData[index].id){
     
     
                    $(this).children(".innerPanel").append(
                        $("<div></div>").attr("id",data[i].id).attr("class","innerPanel2").append(
                            $("<span></span>").append(data[i].name)
                        )
                    )
                }else{
     
     
                    var g = data[i].pId+""
                    $(document.getElementById(g)).append(
                        $("<div></div>").append(data[i].name).attr("class","innerPanel3").attr("id",data[i].id)
                    )
                }
                if(data[i].href!=""){
     
     
                    var id = data[i].pId

                    var sad = {
     
     
                        id: data[i].id,
                        name: data[i].name,
                        href: data[i].href,
                        isFrame:data[i].isFrame
                    }

                    var g = data[i].id+""

                    document.getElementById(g).onclick =function (event) {
     
     
                        event.stopPropagation()

                    }

                }
            }
        })
        /*加入动画.panel 的点击动画效果*/
        $("#ctnUIAccordion .panel").click(function (event) {
     
     
            event.stopPropagation()
            /*获取到自己里面所有内容的高度*/
            var s = $(this).children("div").height()
            var ss = $(this).children("span").height()
            /*判断是展开，还是闭合*/
            if( $(this).height()>45){
     
     
                /*如果是展开状态，则闭合，闭合为45px*/
                $(this).css("height","45")
            }else{
     
     
                /*如果是闭合状态，则展开*/
                $(this).css("height",s+ss)
            }
        })
        /*加入动画.innerPanel2 的点击动画效果*/
        $("#ctnUIAccordion .panel .innerPanel2 ").click(function (event) {
     
     
            event.stopPropagation()
            /*获取到自己里面所有内容的高度*/
            var s = $(this).children("div").height()
            var ss = $(this).children("span").height()
            /*判断是展开，还是闭合*/
            if( $(this).height()>40){
     
     
                /*如果是展开状态，则闭合，闭合为40px*/
                $(this).css("height",40)
                /*在闭合的同时将自己的父亲.panel的高度也调整下*/
                var a = $(this).parents(".panel").children("div").height()
                var b = $(this).parents(".panel").children("span").height()
                $(this).parents(".panel").css("height",a+b-s)
            }else{
     
     
                /*如果是闭合状态，则展开*/
                $(this).css("height",ss+s)
                /*在展开的同时将自己的父亲.panel的高度也调整下*/
                var a = $(this).parents(".panel").children("div").height()
                var b = $(this).parents(".panel").children("span").height()
                $(this).parents(".panel").css("height",a+b+s)

            }

        })





</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/lioncatch/article/details/108735924
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022