JS技术

js输出无级分类方法,原创

字号+ 作者: 来源: 2014-11-16 22:20 我要评论( )

js写的一个输出无级分类方法

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无级分类效果图

js无级分类效果图

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 老生常谈,JavaScript闭包中的this对象

    老生常谈,JavaScript闭包中的this对象

    2016-02-26 10:21

  • 学习JavaScript之this,call,apply

    学习JavaScript之this,call,apply

    2016-01-28 20:45

  • JavaScript复习笔记--字符串

    JavaScript复习笔记--字符串

    2016-01-27 17:16

  • WEB前端教程-JavaScript里的类和继承

    WEB前端教程-JavaScript里的类和继承

    2016-01-21 15:28

网友点评