脫離傳統樹的展現，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>