[bigdata-035]用js dtree展示一个树形结构 py3+dtree+jquery

本文主要是介绍[bigdata-035]用js dtree展示一个树形结构 py3+dtree+jquery，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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_forapp = 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,0,'MySQL','');d.add(11,1,'127.0.0.1:3306','');d.add(111,11,'database1','');d.add(1111,111,'table1','');d.add(11111,1111,'column1','');d.add(12,1,'127.0.0.1:3307','');d.add(121, 12, 'database1', '');d.add(2,0,'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. 效果如下：