【连载】实用小demo连载 5 —— js 无限级菜单 demo_js 平铺结构通过parentid和order-CSDN博客

本文链接：https://blog.csdn.net/snow_finland/article/details/48263183

小demo连载系列5

通过ajax请求到一个平铺式的json数据结构，根据其中的id和parentid的关系，组成父菜单和子菜单的关系，

由于菜单可以通过其它途径（后台）动态编辑改变，所以是一个不确定级数的无限级菜单，

这里研究了一下这种菜单的显示方式（select+js）

demo下载地址（所有连载的demo都是免费）：

http://download.csdn.net/detail/snow_finland/9084915

注意：此demo由于通过ajax请求了一个php文件，所以需要放在php环境中运行

具体代码

html+js

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>无限级菜单demo</title>
</head>

<body>
<div id="J_select_wrap">
</div>
<a href="javascript:;" id="J_get_selected">获取选择项</a>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$('#J_get_selected').hide();

// 用来保存获取到的菜单
var select_list = [];

// 选择下拉菜单中的选项后，触发重新计算子菜单
function select_change(e){
	var index = $(e).index();
	$('#J_select_wrap select:gt('+index+')').remove();
	get_child_option($(e).find('option:selected').val());
}

// 计算子菜单
function get_child_option(num){
	var inner_option = '';
	for(var data_i in select_list){
		if(select_list[data_i].parentid == num){
			inner_option = inner_option + '<option value="'+select_list[data_i].id+'">'+select_list[data_i].name+'</option>';
		}
	}
	if(inner_option != ''){
		$('#J_select_wrap').append('<select οnchange="select_change(this)">'+inner_option+'</select>');
		var select_num = $('#J_select_wrap select').length;
		get_child_option($('#J_select_wrap select').eq(select_num - 1).find('option:selected').val());
	}
}

// 获取菜单的json格式
$.ajax({
	url:'list.php',
	type:'POST',
	dataType:'json',
	success:function(data){
		if(data.code == 1){
			select_list = data.data;
			get_child_option(1);
			$('#J_get_selected').show();
		}
	},
	error:function(){
	}
});

// 获取用户当前选择的菜单的id
$('#J_get_selected').click(function(){
	var select_num = $('#J_select_wrap select').length;
	if(select_num > 0){
		var selected_id = $('#J_select_wrap select').eq(select_num - 1).find('option:selected').val();
		alert(selected_id);
	}else{
		alert('没有选中的选项');
	}
});
</script>
</body>
</html>

ajax请求的list.php

<?php
echo '{"code":1,"data":[{"id":1,"name":"root","parentid":0,"order":200},{"id":2,"name":"1","parentid":1,"order":200},{"id":3,"name":"2","parentid":1,"order":400},{"id":4,"name":"3","parentid":1,"order":600},{"id":5,"name":"4","parentid":1,"order":800},{"id":6,"name":"4.1","parentid":5,"order":200},{"id":7,"name":"4.2","parentid":5,"order":200},{"id":8,"name":"4.1.1","parentid":6,"order":200},{"id":9,"name":"4.1.2","parentid":6,"order":200}]}';
// echo '{"code":1,"data":[]}';
// echo '{"code":1,"data":[{"id":1,"name":"root","parentid":0,"order":200}]}';
?>

思路说明：

1、通过ajax请求获取平铺的菜单json格式，保存在全局变量中（由于每次改变下拉菜单中的值都需要重新计算子菜单，所以需要保存下来）

2、由于返回结构中id为1的是根节点，不需要显示，所以根据它的id1开始寻找它的子菜单

3、遍历json格式，将其中parentid和当前节点id相同的（说明有父菜单-子菜单关系）取出，组成需要显示的格式，

如果未找到对应的子菜单，说明到这里结束了；

如果有对应的子菜单，那么获取子菜单的第一个（因为默认select第一个的option是选中的），根据它的id再去寻找子菜单，直到没有子菜单为止

4、当改变菜单的选项时，移除改变的菜单的所有子菜单（比如改变的是第一级子菜单，那么第二级、第三级……都移除，改变的是第二级，那么第二级、第三级……都移除，以此类推……），并且根据当前菜单当前选中的option重新计算子菜单

5、获取当前被选中的选项，由于id是唯一的，所以只要获取最后一级的菜单的id即可

补充说明：

由于考虑兼容性问题，有些地方可以使用:lastchild的地方都没有用，特此说明，如果只需要考虑支持css3的浏览器，那么可以使用:lastchild的方法以减轻代码