【连载】实用小demo连载 5 —— js 无限级菜单 demo
小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 onchange="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的方法以减轻代码