问题描述
如图，数据库里有一些表示上下级关系的数据，现在领导有一个需求是直接把这些上下级以拓扑图的形式显示出来（就是在页面自动生成上面的那张图），并且每一个A/B/C这样的图标还能用鼠标点击（用于触发事件如跳转页面等等）。求救呀，这该咋整，愁死了！看了很多其他平台的，感觉都需要安装JRE或者Silverlight等，我这个功能必须裸跑呀！谢谢大家了！
解决方案
解决方案二：
哎，最烦的就是这种。不顾自己的公司的技术力量，想当然。其实可以用js在页面实现排版。你用静态页作出这样的效果就发现规律。
解决方案三：
引用1楼winner2050的回复:
哎，最烦的就是这种。不顾自己的公司的技术力量，想当然。其实可以用js在页面实现排版。你用静态页作出这样的效果就发现规律。
谢谢回复，如果是自己排版的话，方格子好排，但是设备之间的连线该怎么画呢？
解决方案四：
求大牛相助呀，是不是非得用上flex呀
解决方案五：
用DIV，和JS特效来整，就可以，当然很麻烦。。。。
解决方案六：
引用4楼CSMSDN的回复:
用DIV，和JS特效来整，就可以，当然很麻烦。。。。
我晕，居然是用原始方法。那请求大牛再指点一下，js又怎么绘制呢？
解决方案七：
之前有用过TreeGenerator,但是是用于window窗体应用程序web应该也可以用,后来发现了些问题自己也改良了一下
解决方案八：
由于资源还在审核,稍候可以去我的资源下载privateTreeBuildermyTree=null;TreeGenerator.TreeData.TreeDataTableDataTabledtTree=newTreeData.TreeDataTableDataTable();dtTree.AddTreeDataTableRow("10010","1","CET4","专业成绩");dtTree.AddTreeDataTableRow("10020","1","CET3","专业成绩");dtTree.AddTreeDataTableRow("30010","10010","优","计算机水平");dtTree.AddTreeDataTableRow("30020","10010","良","计算机水平");dtTree.AddTreeDataTableRow("30030","10010","中","计算机水平");dtTree.AddTreeDataTableRow("30040","10020","优","计算机水平");dtTree.AddTreeDataTableRow("30050","10020","良","计算机水平");myTree=newTreeBuilder(dtTree);myTree.FontSize=8;myTree.BoxHeight=40;myTree.BoxWidth=80;myTree.HorizontalSpace=20;myTree.LineWidth=2;HttpContextcurContext=HttpContext.Current;//设置编码和附件格式curContext.Response.ContentType="image/png";curContext.Response.ContentEncoding=Encoding.UTF8;curContext.Response.Charset="";curContext.Response.AppendHeader("Content-Disposition","attachment;filename="+HttpUtility.UrlEncode("myTree.png",Encoding.UTF8));curContext.Response.BinaryWrite(myTree.GenerateTree(-1,-1,"1",System.Drawing.Imaging.ImageFormat.Png));curContext.Response.End();
解决方案九：
解决方案十：
引用8楼liuchaolin的回复:
下载地址
+1
解决方案十一：
引用7楼liuchaolin的回复:
由于资源还在审核,稍候可以去我的资源下载privateTreeBuildermyTree=null;TreeGenerator.TreeData.TreeDataTableDataTabledtTree=newTreeData.TreeDataTableDataTable();dtTree.AddTreeDataTableRow("1001……
我去，太帅了，我要的就是这个又简单又简洁又实用的工具，而且刚想让你发一发自己项目的图片上来，一看你居然直接传上来了，非常感谢
解决方案十二：
有个myflow的纯js的可以做到你的效果
解决方案十三：
引用2楼nffly11的回复:
谢谢回复，如果是自己排版的话，方格子好排，但是设备之间的连线该怎么画呢？
你都排好了方格子，难道不会计算连线的两个端点坐标吗？
解决方案十四：
感谢@liuchaolin大神，你分享的插件可以很好地生拓扑图！但是做出来却没法给领导交差，因为上头要求的是拓扑图上的按钮可以点击，并可以跳转到其他页面显示其他信息，所以很遗憾呀。最后只好老老实实地自己递归并在页面上生成一行行的<div>和button，差不多能显示这样子但是问题来了，首先我不晓得怎么连线，@sp1234大神，请教有什么好方法连线呢，现在实在想不出来！其次是有个难以解决的bug，因为项目是用.NETWebForm做的，几乎没法写脚本，我是用ScriptManager的RegisterStartupScript这样的方法，往html代码上加上<input>标签。而现在只要用鼠标点击这几个小电脑按钮，那些用js脚本添加上的按钮就会消失，如下图：不知道为什么！有没有大神能支个招呢，感激不尽呀！
解决方案十五：
引用11楼sjfe_cn的回复:
有个myflow的纯js的可以做到你的效果
也求请教，在网上找了很久都没有找到这个js插件，能分享一下经验吗，谢谢@sjfe_cn
解决方案：
我做过这个东西，不过可惜是CS版本的
解决方案：
我也做过这个东西
解决方案：
引用8楼liuchaolin的回复:为什么下载的文件是损坏的？
解决方案：
画图请用raphael.js官网：http://raphaeljs.com/
解决方案：
我做过类似的但是数据量大的话就有点卡