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

发布时间：2020-12-24 13:55:39 所属栏目：大数据来源：网络整理

导读：1. dtree的下载 http://destroydrop.com/javascripts/tree/default.htm 2. 目录结构 . ├── static │?? ├── css │?? │?? └── dtree.css │?? ├── img │?? │?? ├── base.gif │?? │?? ├── cd.gif │?? │?? ├── diffDoc.gif │??

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

（编辑：源码门户网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

全域感知鸟眼人工智	数据项目成功的三个必
孩子的工程思维计算思	将大数据转化为营销收