日期:2014-05-16  浏览次数:20285 次

jquery 读取 json树,并以ul展示

?<script type="text/javascript">???????
??????? var menulist = {
??????????????? "menulist": [
?????????????????? { "MID": "M001", "MName": "首页", "Url": "TB_inline?height=580&amp;width=800&amp;inlineId=myOnPageContent", "children": "" },
??????????????????? { "MID": "M002", "MName": "车辆买卖", "Url": "#", "children":
?????????????????????? [
???????????????????????????? { "MID": "M003", "MName": "新车", "Url": "#", "children":
????????????????????????????? [
?????????????????????????????????? { "MID": "M006", "MName": "奥迪", "Url": "#", "children": "" },
???????????????????????????????? { "MID": "M007", "MName": "别克", "Url": "#", "children": "" }
?????????????????????????????? ]
???????????????????????????? },
???????????????????????????? { "MID": "M004", "MName": "二手车", "Url": "#", "children": "" },
??????????????????????????? { "MID": "M005", "MName": "改装车", "Url": "#", "children": "" }
??????????????????????? ]
?????????????????? },
?????????????????? { "MID": "M006", "MName": "宠物", "Url": "#", "children": "" }
????????????? ]
??????????? };
???????
???????
??????? $(function () {
???????????????? var showlist = $("<ul></ul>");
???????????????? showall(menulist.menulist, showlist);
???????????????? $("#div_menu").append(showlist);
???????????????? alert($("#div_menu").append(showlist).html());
???????? });

???????? //menu_list为json数据
??????? //parent为要组合成html的容器
??????? function showall(menu_list, parent) {
???????????? for (var menu in menu_list) {
???????????????? //如果有子节点,则遍历该子节点
???????????????? if (menu_list[menu].children.length > 0) {
??????????????????? //创建一个子节点li
???????????????????? var li = $("<li></li>");
???????????????????? //拼接字符:<a href='#'>首页</a>
????????????? //?????? var link = (menu_list[menu].Url=="#")?$("<a href='"+menu_list[menu].Url+"'>"+menu_list[menu].MName+"</a>"):$("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
???????????????????? var link = $("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
???????????????????? //将a附加到li里,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
???????????????????? $(li).append(link).append("<ul></ul>").appendTo(parent);
???????????????????? //将空白的ul作为下一个递归遍历的父亲节点传入
???????????????????? showall(menu_list[menu].children, $(li).children().eq(1));
???????????????? }
???????????????? //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
???????????????? else {
??????????????????? //拼接字符:<a href='#'>首页</a>
??????????????????? var link = $("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
??????????????????? $("<li></li>").append(link).appendTo(parent);
???????????????? }
???????????? }
???????? }

??????
?</script>

?

?

?

?<div? id="div_menu"></div>

?

?

?