jQuery tree控件下载_jQuery实现递归树形结构

jQuery文件树形结构菜单，插件是一款利用数组导入文件树形菜单样式效果。使用起来也非常方便，只需要引入js文件之后，简单的调用即可。

1、引入js文件

<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/proTree.js" ></script>

2、菜单数据

var arr = [{
		id: 1,
		name: "一级标题",
		pid: 0
	}, {
		id: 2,
		name: "二级标题",
		pid: 0
	}, {
		id: 3,
		name: "2.1级标题",
		pid: 2
	}, {
		id: 4,
		name: "2.2级标题",
		pid: 2
	}, {
		id: 5,
		name: "1.1级标题",
		pid: 1
	}, {
		id: 6,
		name: "1.2级标题",
		pid: 1
	}, {
		id: 7,
		name: "1.21级标题",
		pid: 6
	}, {
		id: 8,
		name: "三级标题",
		pid: 0
	}, {
		id: 9,
		name: "1.22级标题",
		pid: 6
	}, {
		id: 10,
		name: "1.221级标题",
		pid: 9
	}, {
		id: 11,
		name: "1.2211级标题",
		pid: 10
	}, {
		id: 12,
		name: "1.2212级标题",
		pid: 10
	}

];

3、调用方法

//标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
$(".innerUl").ProTree({
    arr: arr,
    simIcon: "fa fa-file-o",//单个标题字体图标 不传默认glyphicon-file
    mouIconOpen: "fa fa-folder-open-o",//含多个标题的打开字体图标  不传默认glyphicon-folder-open
    mouIconClose:"fa fa-folder-o",//含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
    callback: function(id,name) {
        alert("你选择的id是"   id   "，名字是"   name);
    }

})

以上是部分代码、更多代码可以下载源代码查看、下面是Demo的下载地址

纯jquery实现jquery tree插件源代码下载链接: jquery tree控件 密码: pfa3