【求助】.net页面中的自动生成级联图（拓扑图）的功能

求大牛相助呀，是不是非得用上flex呀

解决方案 »

  1.   

    用DIV，和JS特效来整，就可以，当然很麻烦。
      

  2.   

    之前有用过TreeGenerator,但是是用于window 窗体应用程序
    web应该也可以用,后来发现了些问题自己也改良了一下
      

  3.   

    由于资源还在审核,稍候可以去我的资源下载
    private TreeBuilder myTree = null;
    TreeGenerator.TreeData.TreeDataTableDataTable dtTree = new TreeData.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 = new TreeBuilder(dtTree);myTree.FontSize = 8;
    myTree.BoxHeight = 40;
    myTree.BoxWidth = 80;
    myTree.HorizontalSpace = 20;
    myTree.LineWidth=2;HttpContext curContext = 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();
      

  4.   

    有个myflow的纯js的可以做到你的效果
      

  5.   

    感谢@liuchaolin大神，你分享的插件可以很好地生拓扑图！但是做出来却没法给领导交差，因为上头要求的是拓扑图上的按钮可以点击，并可以跳转到其他页面显示其他信息，所以很遗憾呀。
    最后只好老老实实地自己递归并在页面上生成一行行的<div>和button，差不多能显示这样子
    但是问题来了，首先我不晓得怎么连线，@sp1234大神，请教有什么好方法连线呢，现在实在想不出来！其次是有个难以解决的bug，因为项目是用.NET WebForm做的，几乎没法写脚本，我是用ScriptManager的RegisterStartupScript这样的方法，往html代码上加上<input>标签。而现在只要用鼠标点击这几个小电脑按钮，那些用js脚本添加上的按钮就会消失，如下图：
    不知道为什么！有没有大神能支个招呢，感激不尽呀！
      

  6.   


    也求请教，在网上找了很久都没有找到这个js插件，能分享一下经验吗，谢谢@sjfe_cn
      

  7.   

    画图请用raphael.js官网：http://raphaeljs.com/