练手 js，html5，jquery 弹窗动态创建树形菜单

初入社会，年少轻狂的好市民

于 2022-07-20 17:11:03 发布

阅读量454

点赞数

分类专栏：笔记文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/m0_47879630/article/details/125896116

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js，html5，jquery 弹窗动态创建树形菜单

头文件

<head>
<meta name="viewport" content="width=device-width" charset="utf-8"/>
<link rel="stylesheet" href="../../jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<script src="../../jquery.mobile-1.4.5/demos/js/jquery.min.js"></script>
<script src="../../jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="../../common.js"></script>
<script src="pdqd.js"></script>
<style>
	.menuTree div {
        padding-left: 20px;
    }

    .menuTree div ul {
        overflow: hidden;
        display: none;
        height: auto;
    }

    .menuTree span {
        display: block;
        height: 25px;
        line-height: 25px;
        padding-left: 5px;
        margin: 1px 0;
        cursor: pointer;
        border-bottom: 1px solid #CCC;
    }

    .menuTree span:hover {
        background-color: #e6e6e6;
        color: #cf0404;
    }

    .btn {
        height: 30px;
        margin-top: 10px;
        border-bottom: 1px solid #CCC;
    }
</style>
</head>

表体

<body>
	<div data-role="popup" id="myPopup" data-theme="a"  data-fullscreen="true"
				class="ui-corner-all"
				data-overlay-theme="b">
				 <div id="menuTree" class="menuTree" style="width:250px" ></div>
		</div>
</body>

js 把数据换成json数据即可，简单又方便。

<script>
<div class="ui-field-contain">
		<div class="ui-grid-a">
	 		<div class="ui-block-a"style="width:25%">存放地点:</div><br>
	 		<div class="ui-block-b" style="width:75%">
					<input data-position-to="window" type="button" name="cfdds" id="cfdds" value="..."
					  		    onclick="doSelectCfdd()" style="width:185px">
			 </div>
		 </div>
	</div>
</div>
function doSelectCfdd() {
	
	// 数据
    var data = [{
                "id": "1",
                "name": "1",
                "fatherId": "0",
            },
            {
                "id": "2",
                "name": "1-1",
                "fatherId": "1"
            },
            {
                "id": "3",
                "name": "1-2",
                "fatherId": "1"
            },
            {
                "id": "4",
                "name": "1-1-1",
                "fatherId": "2"
            },
            {
                "id": "5",
                "name": "1-1-2",
                "fatherId": "2"
            },
            {
                "id": "6",
                "name": "2",
                "fatherId": "0"
            },
            {
                "id": "7",
                "name": "1-2-1",
                "fatherId": "3"
            }
        ];
    
        // 处理数据
        //1、 先把数据处理成map
        const map = {};
        const val = [];
        data.forEach((item) => {
            map[item.id] = item;
        });
        // 2、遍历之后，形成树形结构
        data.forEach((item) => {
            const parent = map[item.fatherId];
            if (parent) {
                (parent.children || (parent.children = [])).push(item);
            } else {
                val.push(item);
            }
        });
    
    /*递归实现获取多级树数据并生成DOM结构*/
    var str = "";
    var forTree = function (o) {
        for (var i = 0; i < o.length; i++) {
            var urlstr = "";
            try {
                urlstr = '<div ><span id='+o[i]["id"]+ '><input type="checkbox" id='+o[i]["name"]+ ' onclick=doSelect('+ o[i]["name"] +')>' + o[i]["name"] + '</span><ul>';               
                str += urlstr;
                if (o[i]["children"] != null) {
                    forTree(o[i]["children"]);
                    
                }
                str += "</ul></div>";
            } catch (e) {}
        }
        return str;
    }

    
    /*添加多级树*/
    document.getElementById("menuTree").innerHTML = forTree(val);
    /*树形菜单*/
    var menuTree = function () {
        //所有父元素加[+-]
        $("#menuTree ul").each(function (index, element) {
            var ulContent = $(element).html();
            var spanContent = $(element).siblings("span").html();
            if (ulContent) {
                $(element).siblings("span").html("[+] " + spanContent)
            }
        });

        $("#menuTree").find("div span").click(function () {
            var ul = $(this).siblings("ul");
            var spanStr = $(this).html();
            var spanContent = spanStr.substr(3, spanStr.length);
            if (ul.find("div").html() != null) {
                if (ul.css("display") == "none") {
                    ul.show(300);
                    $(this).html("[-] " + spanContent);
                } else {
                    ul.hide(300);
                    $(this).html("[+] " + spanContent);
                }
            }
        })
    }()

    /*展开*/
    $("#btn_open").click(function () {
        $("#menuTree ul").show(300);
        curzt("-");
    })
    /*收缩*/
    $("#btn_close").click(function () {
        $("#menuTree ul").hide(300);
        curzt("+");
    })

    function curzt(v) {
        $("#menuTree span").each(function (index, element) {
            var ul = $(this).siblings("ul");
            var spanStr = $(this).html();
            var spanContent = spanStr.substr(3, spanStr.length);
            if (ul.find("div").html() != null) {
                $(this).html("[" + v + "] " + spanContent);
            }
        });
    }
	
	
	//解决多次点击弹出，需要点二次才能除非点击事件
	$('#myPopup').popup('open', {'data-position-to' : 'window', 'data-transition':'fade'}); 
	return false;
}

// 将选中的那一条数据展示在页面中
function doSelect(){
	
	$("#myPopup").popup("close");
	window.setTimeout('$("#myPopup").popup("close");', 500);
	
	var objects = document.getElementsByTagName("input");
	for(i=0;i<objects.length;i++){
		if(objects[i].checked == true){
			var data = objects[i].id;
			$("#cfdds").attr("value",data);
			break;
		}
	}
	
	return false;
}
</script>