js输出无级分类方法
类似于Windows的资源管理器左边的分类,可以用于无限级的分类显示。
本方法用到了jquery,请自行修改载入jquery的路径。
javascript部份
//下面的是一个从数据库拿过来的组装好的json数据 var a = '[{"id":"1","menuName":"*Requirement","parentId":"0",\ "subMenuSet":[{"id":"11","menuName":"Requirement Overview","parentId":"1",\ "subMenuSet":[],"url":"proxy/testlink/lib/requirements/reqOverview.php"},\ {"id":"12","menuName":"Manage Requirements","parentId":"1",\ "subMenuSet":[],"url":"proxy/testlink/lib/requirements/reqSpecListTree.php"},\ {"id":"13","menuName":"Assign to Users","parentId":"1","subMenuSet":[],\ "url":"mainPage"},{"id":"14","menuName":"Test case Association","parentId":"1",\ "subMenuSet":[],"url":"proxy/testlink/lib/testcases/listTestCases.php?feature=assignReqs"},\ {"id":"15","menuName":"Generate Document","parentId":"1","subMenuSet":[],\ "url":"proxy/testlink/lib/results/printDocOptions.php?type=reqspec"}],"url":""},\ {"id":"2","menuName":"*Test Case Manage","parentId":"0","subMenuSet":[\ {"id":"21","menuName":"Manage test case","parentId":"2","subMenuSet":[],\ "url":"proxy/testlink/lib/testcases/listTestCases.php?feature=edit_tc"},\ {"id":"22","menuName":"Assign to Test Plan","parentId":"2","subMenuSet":[],\ "url":"proxy/testlink/lib/testcases/listTestCases.php?feature=keywordsAssign"},\ {"id":"23","menuName":"Assign to Execution","parentId":"2","subMenuSet":[],\ "url":"proxy/testlink/lib/testcases/tcAssignedToUser.php"}],"url":""},\ {"id":"3","menuName":"*Execute","parentId":"0","subMenuSet":[\ {"id":"31","menuName":"**Test Management","parentId":"3",\ "subMenuSet":[{"id":"311","menuName":"Test Plan","parentId":"31",\ "subMenuSet":[],"url":"proxy/testlink/lib/plan/planView.php"},\ {"id":"312","menuName":"Test Builds","parentId":"31","subMenuSet":[],\ "url":"proxy/testlink/lib/plan/buildView.php"},{"id":"313",\ "menuName":"Test Milestone","parentId":"31","subMenuSet":[],\ "url":"proxy/testlink/lib/plan/planMilestonesView.php"}],"url":""},\ {"id":"32","menuName":"**Test Case","parentId":"3",\ "subMenuSet":[{"id":"321","menuName":"My Test Case","parentId":"32",\ "subMenuSet":[],"url":"proxy/testlink/lib/testcases/tcAssignedToUser.php"},\ {"id":"322","menuName":"Execute Test Case","parentId":"32",\ "subMenuSet":[],"url":"proxy/testlink/lib/execute/execNavigator.php"},\ {"id":"323","menuName":"Quick Execution","parentId":"32","subMenuSet":[],\ "url":"mainPage"}],"url":""},{"id":"33","menuName":"**Auto Runner",\ "parentId":"3","subMenuSet":[{"id":"331","menuName":"Manage Script",\ "parentId":"33","subMenuSet":[],"url":"mainPage"},{"id":"332",\ "menuName":"Execute Task","parentId":"33","subMenuSet":[],\ "url":"proxy/AUPForTest/gui/test_task/themes/js/get_create_task.php"},\ {"id":"333","menuName":"View Task","parentId":"33","subMenuSet":[],\ "url":"proxy/AUPForTest/gui/test_task/themes/js/get_show_data.php"},\ {"id":"334","menuName":"Manage Package","parentId":"33","subMenuSet":[],\ "url":"proxy/AUPForTest/gui/test_task/gui/ManagerTest_SuitView.php"},\ {"id":"335","menuName":"Manage Machine","parentId":"33","subMenuSet":[],\ "url":"proxy/AUPForTest/gui/test_task/themes/js/get_show_machinelist.php"},\ {"id":"336","menuName":"Auto Test Information","parentId":"33",\ "subMenuSet":[],"url":"proxy/AUPForTest/gui/fun/template_list.php"}],\ "url":""}],"url":""}]'; var jsons=[]; a = eval(a); function forJson(o) { for(var j=0; j<o.length;j++) { if(jsons[o[j]["parentId"]] === undefined) { jsons[o[j]["parentId"]] = ""} jsons[o[j]["parentId"]] +="<ul id='menu"+o[j]["id"]+"'><li> \ <a href='"+o[j]["url"]+"'>"+o[j]["menuName"]+"</a></li></ul>"; //将每个同一级的列表放入parentID下 if(typeof o[j]["subMenuSet"] === "object" && o[j]["subMenuSet"].length >0) { forJson(o[j]["subMenuSet"]); //递规运算,如果有下级分类自动调用自己再次循环 } } return jsons; } jsonss = forJson(a); //得到组装后的数组 var submenu = '', cate=''; for(var j=0; j<a.length;j++) {//输出一级菜单 cate += '<ul id="menu'+a[j]["id"]+'"><li><a href="'+a[j]["url"]+'" \ id="'+a[j]["id"]+'">'+a[j]["menuName"]+'</a></li></ul>' } $(function () { $("#menu").html(cate); for(var i=1; i<jsonss.length; i++) { //循环上面组装后的数组放入相应的父列表下 if(jsonss[i] && jsonss[i].length>0) { $("#menu"+i).append(jsonss[i]); } } })
html部份很简单,只要在body里放一个<div id=”menu”></div>

js无级分类效果图