1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div class="innerUl"></div>
4、书写css代码。<style>* { padding: 0; margin: 0; font-family: "microsoft yahei"; }ul li { list-style-type: none; }.box { width: 200px; }ul { margin-left: 20px; }.menuUl li { margin: 10px 0; }.menuUl li span:hover { text-decoration: underline; cursor: pointer; }.menuUl li i { width:16px; height:16px; display:inline-block; margin-right: 10px; top: 0px; cursor: pointer; color: #161616;}.fa-file-o{ background:url(c1.jpg) no-repeat center center !important;}Ul li:first-child i {background:url(c2.jpg) no-repeat center center;}</style>
5、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/proTree.js" ></script><script>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 }];$(".innerUl").ProTree({ arr: arr, simIcon: "fa fa-file-o", mouIconOpen: "fa fa-folder-open-o", mouIconClose:"fa fa-folder-o", callback: function(id,name) { alert("你选择的id是" + id + "，名字是" + name); }})</script>
6、书写proTree.js代码。(function($) { var Tree = function(element, options) { this.element = element; this.JSONArr = options.arr; this.simIcon = options.simIcon || ""; this.mouIconOpen = options.mouIconOpen || "fa fa-folder-open-o"; this.mouIconClose = options.mouIconClose || "fa fa-folder-o"; this.callback = options.callback || function() {}; this.init(); } Tree.prototype.init = function() { this.JSONTreeArr = this.proJSON(this.JSONArr, 0); this.treeHTML = this.proHTML(this.JSONTreeArr); this.element.append(this.treeHTML); this.bindEvent(); } Tree.prototype.proJSON = function(oldArr, pid) { var newArr = []; var self = this; oldArr.map(function(item) { if(item.pid == pid) { var obj = { id: item.id, name: item.name } var child = self.proJSON(oldArr, item.id); if(child.length > 0) { obj.child = child } newArr.push(obj) } }) return newArr; }; Tree.prototype.proHTML = function(arr) { var ulHtml = "<ul class='menuUl'>"; var self = this; arr.map(function(item) { var lihtml = "<li>"; if(item.child && item.child.length > 0) { lihtml += "<i ischek='true' class='" + self.mouIconOpen + "'></i>" + "<span id='" + item.id + "'>" + item.name + "</span>" var _ul = self.proHTML(item.child); lihtml += _ul + "</li>"; } else { lihtml += "<i class='" + self.simIcon + "'></i>" + "<span id='" + item.id + "'>" + item.name + "</span>"; } ulHtml += lihtml; }) ulHtml += "</ul>"; return ulHtml; } Tree.prototype.bindEvent = function() { var self = this; this.element.find(".menuUl li i").click(function() { var ischek = $(this).attr("ischek"); if(ischek == 'true') { var menuUl = $(this).closest("li").children(".menuUl"); $(this).removeClass(self.mouIconOpen).addClass(self.mouIconClose) menuUl.hide(); $(this).attr("ischek", 'false'); } else if(ischek == 'false') { var menuUl = $(this).closest("li").children(".menuUl"); menuUl.show(); $(this).removeClass(self.mouIconClose).addClass(self.mouIconOpen) $(this).attr("ischek", 'true') } }); this.element.find(".menuUl li span").click(function() { var id = $(this).attr("id"); var name = $(this).text(); self.callback(id, name) }) } $.fn.extend({ ProTree: function(options) { return new Tree($(this), options) } }) })(jQuery);
7、代码整体结构。
8、查看效果。
