【连载】实用小demo连载 5 —— js 无限级菜单 demo

来源：互联网发布：淘宝背景音乐代码生成编辑：程序博客网时间：2024/04/27 19:48

小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

<?phpecho '{"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的方法以减轻代码

0 0