脱离传统树的展示，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": "[e-mail]",
                                    "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>