由 dawei 1. dtree的下载
http://destroydrop.com/javascripts/tree/default.htm
2. 目录结构
.
├── static
│?? ├── css
│?? │?? └── dtree.css
│?? ├── img
│?? │?? ├── base.gif
│?? │?? ├── cd.gif
│?? │?? ├── diffDoc.gif
│?? │?? ├── diffFolder.gif
│?? │?? ├── empty.gif
│?? │?? ├── folder.gif
│?? │?? ├── folderopen.gif
│?? │?? ├── ftv2blank.gif
│?? │?? ├── ftv2doc.gif
│?? │?? ├── ftv2folderclosed.gif
│?? │?? ├── ftv2folderopen.gif
│?? │?? ├── ftv2lastnode.gif
│?? │?? ├── ftv2link.gif
│?? │?? ├── ftv2mlastnode.gif
│?? │?? ├── ftv2mnode.gif
│?? │?? ├── ftv2node.gif
│?? │?? ├── ftv2plastnode.gif
│?? │?? ├── ftv2pnode.gif
│?? │?? ├── ftv2vertline.gif
│?? │?? ├── globe.gif
│?? │?? ├── imgfolder.gif
│?? │?? ├── joinbottom.gif
│?? │?? ├── join.gif
│?? │?? ├── line.gif
│?? │?? ├── minusbottom.gif
│?? │?? ├── minus.gif
│?? │?? ├── musicfolder.gif
│?? │?? ├── nolines_minus.gif
│?? │?? ├── nolines_plus.gif
│?? │?? ├── page.gif
│?? │?? ├── plusbottom.gif
│?? │?? ├── plus.gif
│?? │?? ├── question.gif
│?? │?? └── trash.gif
│?? └── js
│?????? ├── dtree.js
│?????? └── mydtree.js
├── templates
│?? └── mydtree.html
└── web_server.py
3. web_server.py文件内容
#！/usr/bin/env python3
#! -*- coding:utf-8 -*-
from flask import Flask,request,render_template,jsonify,make_response,url_for
app = Flask(__name__)
@app.route("/dtree",methods=['GET'])
def dtree():
return render_template("mydtree.html")
def start_web_server():
app.run(host='0.0.0.0',port=8888)
if __name__ == "__main__":
start_web_server()
4. mydtree.html内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="StyleSheet" href="/static/css/dtree.css" type="text/css" /> <script type="text/javascript" src="/static/js/dtree.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="/static/js/mydtree.js"></script> </head> <body> <div class="dtree"> </div> </body> </html>
6. mydtree.js文件内容
$(document).ready(function(){
d = new dTree('d');
d.add(0,-1,'Meta Data');
d.add(1,'MySQL','');
d.add(11,1,'127.0.0.1:3306','');
d.add(111,11,'database1','');
d.add(1111,111,'table1','');
d.add(22222,1111,'column1','');
d.add(12,'127.0.0.1:3307','');
d.add(121,12,'');
d.add(2,'Oracle','');
d.add(21,2,'database1');
var open_and_close = "<p><a href=\"javascript: d.openAll();\">全部展开</a> | <a href=\"javascript: d.closeAll();\">全部关闭</a></p>";
$("div.dtree").html(""+open_and_close+d);
});
7. dtree.js,dtree.css,以及img目录下的图标文件，都是dtree里自带的，就不列出来了。
8. 效果如下：
![[bigdata-035]用js dtree展示一个树形结构 py3+dtree+jquery](https://www.52php.cn/res/2020/10-09/09/ee7ccbd2cbaab7dbba3d17834b5b9009.jpg)