jQuery tree控件下载_jQuery实现递归树形结构
2017-10-25 14:43:31  By: shinyuu

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

jQuery实现递归树形结构


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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+