├── demo.html
├── README.md
└── folder2tree.js
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | A simple demo for folder2tree
6 |
7 |
8 |
9 |
10 |
11 |
53 |
54 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #folder2tree
2 |
3 | 用树形节点展示文件夹结构。
4 | Show your folder structure with tree nodes.
5 | ### 使用 Usage:
6 |
7 | @param {Dom} 父级dom节点
8 | @param {Array} 描述文件夹层级关系对象
9 |
10 | ```js
11 | folder2tree.init(document.getElementById("ctn"), [
12 | {
13 | "img" : [
14 | "sprite.png",
15 | "bg.png"
16 | ]
17 | },{
18 | "js": [{
19 | "common": [
20 | "jquery.js",{
21 | "highcharts": [{
22 | "modules": ["exporting.js"]
23 | },
24 | "highcharts.js"
25 | ]}
26 | ]
27 | },{
28 | "index": [
29 | "mian.js",{
30 | "modules": ["mod.video.js"]
31 | }
32 | ]
33 | }]
34 | },{
35 | "css": [
36 | "base.css",
37 | "index-main.css",
38 | "index-video.css"
39 | ]
40 | },
41 | "index.html",
42 | "favicon.ico"
43 | ]);
44 | ```
45 |
46 | ### 展示 Show:
47 | ```
48 | ├─img
49 | │ ├─sprite.png
50 | │ └─bg.png
51 | ├─js
52 | │ ├─common
53 | │ │ ├─jquery.js
54 | │ │ └─highcharts
55 | │ │ ├─modules
56 | │ │ │ └─exporting.js
57 | │ │ └─highcharts.js
58 | │ └─index
59 | │ ├─mian.js
60 | │ └─modules
61 | │ └─mod.video.js
62 | ├─css
63 | │ ├─base.css
64 | │ ├─index-main.css
65 | │ └─index-video.css
66 | ├─index.html
67 | └─favicon.ico
68 | ```
69 |
70 |
--------------------------------------------------------------------------------
/folder2tree.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @fileoverview Show your folder structure with tree nodes. 用树形节点展示文件夹结构
4 | * @version 1.1
5 | * @author HJava, litten
6 | * @lastUpdate 2014-08-14 09:35
7 | * @function: 1. init(ctn ,data)
8 | */
9 | (function(root, factory) {
10 | if(typeof define === 'function' && define.amd) {
11 | define([], factory);
12 | } else {
13 | root['folder2tree'] = factory();
14 | }
15 | }(this, function() {
16 |
17 | var arr2obj = function(arr) {
18 | var obj = {};
19 | for(var i = 0, len = arr.length; i < len; i++) {
20 | var em = arr[i];
21 | if(typeof(em) === "string" || typeof(em) === "number") {
22 | obj[em] = em;
23 | } else if(typeof(em) === "object") {
24 | for(var key in em) {
25 | obj[key] = arr2obj(em[key]);
26 | }
27 | }
28 | }
29 | return obj;
30 | }
31 |
32 | function getObjLen(obj) {
33 | var count = 0;
34 | for(var em in obj) {
35 | count++;
36 | }
37 | return count;
38 | }
39 |
40 | function getTree(data) {
41 | var result = createDiv();
42 | var all = show(data, '');
43 | for(var i = 0; i < all.length; i++) {
44 | result.appendChild(all[i]);
45 | }
46 | return result;
47 | }
48 |
49 | function show(data, content) {
50 | var all = [];
51 | var len = getObjLen(data);
52 | var count = 1;
53 |
54 | for(var i in data) {
55 | var front = content;
56 | var isLast = (count === len) ? true : false;
57 | front += isLast ? ' ' : '│ ';
58 | if(typeof data[i] === 'string' || typeof data[i] === 'number') {
59 | all.push(createDiv(i, data[i], content, isLast));
60 | } else if(typeof data[i] === "object") {
61 | all.push(createDiv(i, i, content, isLast));
62 | var arr = arguments.callee(data[i], front);
63 | var parent = createDiv(i, '', content, isLast);
64 | for(var j in arr) {
65 | parent.appendChild(arr[j]);
66 | }
67 | all = all.concat(parent);
68 | } else {
69 | continue;
70 | }
71 | count++;
72 | }
73 | return all;
74 | }
75 |
76 | function createDiv(key, value, front, isLast) {
77 | var key = key || '';
78 | var value = value || '';
79 | var div = document.createElement('div');
80 | if(key !== '') {
81 | div.setAttribute('data-key', key);
82 | }
83 | if(value !== '') {
84 | var content = isLast ? '└─' : '├─';
85 | div.innerHTML = front + content + value;
86 | }
87 | return div;
88 | }
89 |
90 | return {
91 | /**
92 | * 初始化方法
93 | *
94 | * @param {Dom} ctn 父级dom节点
95 | * @param {Object} data 描述文件夹层级关系对象
96 | */
97 | init: function(ctn, data) {
98 | ctn = ctn || document.getElementsByTagName("body")[0];
99 | if(data) {
100 | if(data instanceof Array) {
101 | data = arr2obj(data);
102 | }
103 | console.log(data);
104 | ctn.appendChild(getTree(data));
105 | } else {
106 | console.log("data is null");
107 | }
108 |
109 | }
110 | }
111 | }));
112 |
--------------------------------------------------------------------------------