首页 > 代码库 > jQuery操作列表数据转成Json再输出为html dom树
jQuery操作列表数据转成Json再输出为html dom树
jQuery 把列表数据转成Json再输出为如下 dom树
<div id="menu" class="lv1"> <ul class="menu"> <li><a href="http://www.mamicode.com/#" class="parent"><span>aaaaaaaaaaa</span></a> <div class="lv2"> <ul> <li><a href="http://www.mamicode.com/#" class="parent"><span>bbbbbbbbbbbbbbbb</span></a> <div class="lv3"> <ul> <li><a href="http://www.mamicode.com/#" class="parent"><span>cccccccc</span></a> <div class="lv4"> <ul> <li><a href="http://www.mamicode.com/#"><span>ddddddddd</span></a></li> <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li> <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li> <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li> <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li> <li><a href="http://www.mamicode.com/#"><span>dddddddd</span></a></li> </ul> </div> </li> <li><a href="http://www.mamicode.com/#"><span>ccccccccccccc</span></a></li> <li><a href="http://www.mamicode.com/#"><span>cccccccc</span></a></li> <li><a href="http://www.mamicode.com/#"><span>cccccccccc</span></a></li> <li><a href="http://www.mamicode.com/#"><span>cccccccccc</span></a></li> <li><a href="http://www.mamicode.com/#"><span>ccccccccc</span></a></li> </ul> </div> </li> <li><a href="http://www.mamicode.com/#" class="parent"><span>bbbbbbbbbbbbbbbbb</span></a> <div class="lv3"> <ul> <li><a href="http://www.mamicode.com/#"><span>cccccccccccc</span></a></li> <li><a href="http://www.mamicode.com/#"><span>cccccccccccc</span></a></li> </ul> </div> </li> </ul> </div> </li> </ul> </div>
列表字段分别为Title Level Parent Content, JQ代码如下
/** * @create: nelson * @initTree 初始化生成菜单 * @调用方式 $("#menu").initTree(qListview); */$.fn.extend({ initTree: function (qListview) { var This = $(this); var That = $(qListview); var keyArr = new Array(); var jsonArr = new Array(); That.find("thead th").each(function () { keyArr.push($(this).text()); }); That.find("tbody tr").each(function (index) { var jsonObj = {}; $(this).find("td").each(function (n) { jsonObj[keyArr[n]] = $(this).html(); }); jsonArr.push(jsonObj); }); This.attr(‘class‘, ‘lv1‘).append(‘<ul class="menu"></ul>‘); $.each(jsonArr, function (entryIndex, entry) { switch (entry[‘Level‘]) { case ‘1‘: This.find("ul").append(‘<li><a href="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘); break; case ‘2‘: This.find(">ul>li>a").each(function () { if (entry[‘Parent‘] == $(this).text()) { $(this).attr(‘class‘, ‘parent‘); if ($(this).parent().find(‘.lv2‘).html() == undefined) { $(this).parent().append(‘<div class="lv2"><ul>‘ + ‘<li><a href="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘ + ‘</ul></div>‘); } else { $(this).parent().find(‘.lv2>ul‘).append(‘<li><a href="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘); } return false; } }); break; case ‘3‘: This.find(".lv2>ul>li>a").each(function () { if (entry[‘Parent‘] == $(this).text()) { $(this).attr(‘class‘, ‘parent‘); if ($(this).parent().find(‘.lv3‘).html() == undefined) { $(this).parent().append(‘<div class="lv3"><ul>‘ + ‘<li><a href="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘ + ‘</ul></div>‘); } else { $(this).parent().find(‘.lv3>ul‘).append(‘<li><a href="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘); } return false; } }); break; case ‘4‘: This.find(".lv3>ul>li>a").each(function () { if (entry[‘Parent‘] == $(this).text()) { $(this).attr(‘class‘, ‘parent‘); if ($(this).parent().find(‘.lv4‘).html() == undefined) { $(this).parent().append(‘<div class="lv4"><ul>‘ + ‘<li><a href="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘ + ‘</ul></div>‘); } else { $(this).parent().find(‘.lv4>ul‘).append(‘<li><a href="http://www.mamicode.com/#"><span>‘ + entry[‘Title‘] + ‘</span></a></li>‘); } return false; } }); break; default: break; } }); return jsonArr; }});
jQuery操作列表数据转成Json再输出为html dom树
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。