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

最新推荐文章于 2020-09-08 18:43:54 发布

未济2019

最新推荐文章于 2020-09-08 18:43:54 发布

阅读量417

点赞数

本文链接：https://blog.csdn.net/lizhe_dashuju/article/details/54694657

版权

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,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. 效果如下：