脱离传统树的展现，jsMind以全新的思惟导图模式给你不同的体验

效果图:

jsmind组件下载地址：https://files.cnblogs.com/files/fengyeqingxiang/jsmind.zip

后端代码，此处以C#编写的后台，Java或其余语言同理

using Web.Model.Design;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;

namespace Web.Controllers
{
    public class DesignController : BaseController
    {
        BLL.Design.Design_DrawingData bll = new BLL.Design.Design_DrawingData();
        #region 以树形式展现图纸目录
        /// <summary>
        /// 视图
        /// </summary>
        /// <returns></returns>
        public ActionResult DrawingTree()
        {
            if (CurrentUser == null)//验证用户是否登陆
                return new HttpUnauthorizedResult();
            return View();
        }
        #endregion
        /// <summary>
        /// 文件树视图，页面初始化获取树数据，以json形式返回
        /// </summary>   
        /// <returns></returns>
        public ActionResult GetDesignFileTreeData()
        {
            List<FileNode> listTree = InitTree();
            return Json(listTree, JsonRequestBehavior.AllowGet);
        }
        /// <summary>
        /// 初始化加载树
        /// </summary>
        /// <returns></returns>
        private List<FileNode> InitTree()
        {
            List<FileNode> listNodes = new List<FileNode>();
            BLL.Design.Design_DrawingData home = new BLL.Design.Design_DrawingData();
            var newTree = home.QueryList(); //数据库查找数据源，此处也能够定义虚拟数据
            #region 一次性存储数据源，后面后面递归子集时屡次使用
            List<FileNode> nodeList = new List<FileNode>();
            foreach (var item in newTree)
            {
                FileNode node2 = new FileNode();
                node2.id = item.DrawingId;//要显示的id,此id通常为表的主键，具备惟一性
                node2.topic = item.DrawingCode;//要显示的名称
                node2.direction = item.Note;//思惟导图伸向，目前只支持left/right
                node2.parentId = item.ParentDrawingId;
                node2.expanded = true;//该节点是否展开

                if (item.FilePath!=null&&item.FilePath.Length>0)
                {
                    node2.background = "#eee";//节点背景色
                    node2.foreground = "blue";//节点字体色
                    node2.topic = item.DrawingCode +"(<a href=\"javascript:showFile('"+item.FilePath+"');\">预览</a>  <a href=\""+item.FilePath+"\" target=\"view_window\">下载</a>)";
                }

                nodeList.Add(node2);
            }
            #endregion

            #region 装载数据源，此数据结果返回的是最终的全部结点树集合
            List<FileNode> rootNode = new List<FileNode>();
            foreach (var plist in newTree.Where(t => t.ParentDrawingId == 0))
            {
                FileNode node = new FileNode();
                node.id = plist.DrawingId;
                node.topic = plist.DrawingCode;
                node.direction = plist.Note;//思惟导图伸向，目前只支持left/right
                node.parentId = plist.ParentDrawingId;
                node.background = "#eee";//节点背景颜色
                node.foreground = "blue";//节点字体颜色
                node.expanded = true;
                node.children = CreateChildTree(nodeList, node);
                rootNode.Add(node);
            }
            return rootNode;
            #endregion
        }
        /// <summary>
        /// 获取子集树
        /// </summary>
        /// <param name="TreeList"></param>
        /// <param name="jt"></param>
        /// <returns></returns>
        private List<FileNode> CreateChildTree(List<FileNode> TreeList, FileNode filenode)
        {
            List<FileNode> nodeList = new List<FileNode>();
            var children = TreeList.Where(t => t.parentId == filenode.id);
            foreach (var chl in children)
            {
                FileNode node = new FileNode();
                node.id = chl.id;
                node.topic = chl.topic;
                node.direction = chl.direction;//思惟导图伸向，目前只支持left/right
                node.parentId = chl.parentId;
                node.background = chl.background;//节点背景颜色
                node.foreground = chl.foreground;//节点字体颜色
                node.expanded = true;
                node.children = CreateChildTree(TreeList, node);
                nodeList.Add(node);
            }
            return nodeList;
        }
       
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Web.Model.Design
{
    ///<summary> 
    ///节点实体类
    /// </summary>
    [Serializable]
    public class FileNode
    {
        public int id { get; set; }//对应jsmind惟一id
        public string topic { get; set; }//对应jsmind显示的名称
        public string direction { get; set; }//对应jsmind思惟导图的朝向 left/right
        public bool expanded { get; set; } //对应jsmind该节点是否展开true/false
        public string background { get; set; } //jsmind只识别background-color属性，此处定义“-”会编译不经过，待前台js批量替换处理
        public string foreground { get; set; } //jsmind只识别foreground-color属性，此处定义“-”会编译不经过，待前台js批量替换处理
        public int parentId { get; set; } //jsmind没有此属性，此处定义为了与数据库所属父节点字段对应，递归关联查询时会用到
        public List<FileNode> children { get; set; }//对应jsmind当前节点的子节点集合
    }
}

前端页面代码，此处以asp.net mvc页面视图编写，都是插件获取后台返回的json，其余语言同理

@model  List<Model.Design.Design_DrawingData>

@{

    ViewBag.Title = "jsmind思惟导图展现树";

    Layout = "~/Themes/default/Views/Shared/_Layout.cshtml ";

    ViewBag.PageSystemName = "DrawingTree";

}

<link type="text/css" rel="stylesheet" href="~/Content/plugins/jsmind/style/jsmind.css" />

<section>

    <div class="popProjectBaseInfo">

        <div class="box box-default box_baseinfo">

            <div class="box-header with-border">

                <h3 class="box-title">上传图纸</h3>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px; onclick="show_data();">提取json</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px" onclick="remove_node();">删除节点</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px" onclick="zoomIn();">放大</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px" onclick="zoomOut();">缩小</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px" onclick="expand_all();">展开全部节点</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px" onclick="collapse_all();">合并全部节点</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px; onclick="show_selected();">获取选择的节点</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px" onclick="add_node();">历史版本</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px" onclick="add_node();">图纸变动</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px" onclick="add_upfile();">上传图纸</button>

                <button type="button" class="btn add-btn-class pull-right" style="margin-right: 5px" onclick="add_node();">新增节点</button>

            </div>

            <div class="box-body content_block_content">

                <div id="layout">

                    <div id="jsmind_container"></div>

                    <div style="display: none">

                        <input class="file" type="file" id="image-chooser" accept="image/*" />

                    </div>

                </div>



                <script type="text/javascript" src="~/Content/plugins/jsmind/js/jsmind.js"></script>

                <script type="text/javascript" src="~/Content/plugins/jsmind/js/jsmind.draggable.js"></script>

                <script type="text/javascript" src="~/Content/plugins/jsmind/js/jsmind.screenshot.js"></script>

                <script type="text/javascript">
                    var _jm = null;
                    function open_empty() {

                        var options = {

                            container: 'jsmind_container',
                            theme: 'greensea',
                            editable: true

                        }
                        _jm = jsMind.show(options);
                        // _jm = jsMind.show(options,mind);
                    }

                    //思惟导图区自适应高度
                    window.onload = function () {

                        function auto_height() {

                            //var h= document.documentElement.clientHeight-200;

                            //var high = document.getElementById("box");

                            //high.style.height=h+"px";

                            document.getElementById("jsmind_container").style.height = document.documentElement.clientHeight-180 + "px";

                        }

                        auto_height();

                        onresize = auto_height;

                    }
                    //预览图纸
                    function showFile(filepath) {

                        layer.photos({ photos: { "data": [{ "src": filepath }] }, anim: 5 });
                    }
                    //初始化获取树信息，加载到jsmin插件里
                    $(function () {

                        $.get("/Design/GetDesignFileTreeData", function (data) {
                //因jsmind插件识别的json格式外侧不识别[],因此此处须要进行处理，将json解析成字符串删除两边[]后再转成json格式

                            var str = JSON.stringify(data);  
                            str = str.slice(1); //删除第一个字符[
                            str = str.substring(0, str.length - 1);//删除 最后一个字符]

                            var newstr = "{\"id\":\"0\",\"topic\":\"XX项目\",\"children\":[" + str + "]}"; //定义jsmind中心节点数据，此节点不是数据库返回的数据

                            //下面处理jsmind识别颜色的属性，因后台返回的没有-color,此处批量处理jsmind才能识别

                            re = new RegExp("background", "g"); //定义正则表达式，g标识所有替换

                            newstr = newstr.replace(re, "background-color");

                            re = new RegExp("foreground", "g"); //定义正则表达式，g标识所有替换

                            newstr = newstr.replace(re, "foreground-color");

                            //最终将处理好的json字符串转成json格式

                            var jsonData = $.parseJSON(newstr);

                            console.log(jsonData);

                            //加载模型树

                            var mind = {

                                "meta": {

                                    "name": "jsMind remote",
                                    "author": "563924009@qq.com",
                                    "version": "0.2"

                                },
                                "format": "node_tree",//node_array为列表模式
                                "data": jsonData

                            }
                            _jm.show(mind);

                        })

                    })

                    //提取jsmind页面展现的json数据
                    function show_data() {

                        var mind_data = _jm.get_data();
                        var mind_string = jsMind.util.json.json2string(mind_data);
                        prompt_info(mind_string);

                    }

                    //获取选择的节点id
                    function get_selected_nodeid() {

                        var selected_node = _jm.get_selected_node();
                        if (!!selected_node) {

                            return selected_node.id;

                        } else {

                            return null;

                        }

                    }
                    //新增节点
                    function add_node() {

                        var selected_node = _jm.get_selected_node(); // as parent of new node
                        if (!selected_node) { prompt_info('请选择一个节点！'); return; }
                        layer_show('新增节点', '/Design/DrawingAdd?drawingId=' + selected_node.id, 600, 350);

                    }
                    //节点下上传文件
                    function add_upfile() {

                        var selected_node = _jm.get_selected_node(); // as parent of new node
                        if (!selected_node) { prompt_info('请选择一个节点！'); return; }
                        var isLastNode = Object.keys(selected_node.children).length;
                        if (isLastNode > 0) {

                            if (selected_node.children[0].topic.indexOf('href') > 0) {

                                layer.msg("该节点已上传文件！", { icon: 0 });
                            } else {

                                layer_show('图纸上传', '/Design/Drawingupload?drawingId=' + selected_node.id, 650, 350);
                            }
                        } else {

                            layer_show('图纸上传', '/Design/Drawingupload?drawingId=' + selected_node.id, 650, 350);
                        }

                    }

                    //删除节点
                    function remove_node() {

                        var selected_id = get_selected_nodeid();
                        if (!selected_id) { prompt_info('please select a node first.'); return; }

                        _jm.remove_node(selected_id);

                    }
                   
                    //画布缩小
                    function zoomIn() {

                        if (_jm.view.zoomIn()) {

                            zoomOutButton.disabled = false;

                        } else {

                            zoomInButton.disabled = true;

                        };

                    };
                    //画布放大
                    function zoomOut() {

                        if (_jm.view.zoomOut()) {

                            zoomInButton.disabled = false;

                        } else {

                            zoomOutButton.disabled = true;

                        };

                    };
                    //展开全部节点
                    function expand_all() {

                        _jm.expand_all();

                    }            
                    //合并全部节点
                    function collapse_all() {

                        _jm.collapse_all();

                    }
                    //layer提示信息
                    function prompt_info(msg) {

                        alert(msg);

                    }
                </script>
            </div>
        </div>
    </div>
</section>