jsMind思维导图模式数据展示

最新推荐文章于 2025-07-08 15:53:35 发布

原创

最新推荐文章于 2025-07-08 15:53:35 发布 · 6.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#jsmind思维导图 #递归读取树返回json

本文展示了如何利用jsMind组件创建思维导图，包括后端C#代码生成JSON数据，以及前端ASP.NET MVC页面展示这些数据的示例。提供jsMind组件的下载链接，强调了内容的原创性和引用要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图:

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

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 TreeDataController : BaseController
    {
        BLL.TreeData bll = new BLL.TreeData();
        #region 以树形式展示图纸目录
        /// <summary>
        /// 视图
        /// </summary>
        /// <returns></returns>
        public ActionResult DrawingTree()
        {
            if (CurrentUser == null)//验证用户是否登录
                return new HttpUnauthorizedResult();
            return View();
        }
        #endregion
        /// <summary>
        /// 文件树视图，页面初始化获取树数据，以json形式返回
        /// </summary>   
        /// <returns></returns>
        public ActionResult GetTreeData()
        {
            List<FileNode> listTree = InitTree();
            return Json(listTree, JsonRequestBehavior.AllowGet);
        }
        /// <summary>
        /// 初始化加载树
        /// </summary>
        /// <returns></returns>
        private List<FileNode> InitTree()
        {
            List<FileNode> listNodes = new List<FileNode>();
            var newTree = bll.QueryList(); //数据库查找数据源，此处也可以定义虚拟数据
            #region 首次加载检测不到数据时默认插入项目节点
            if (newTree.Count == 0)
            {
                bll.Add(new Model.TreeData()
                {
                    BgColor = "#eee";//节点背景颜色
                    FgColor="#eee";//节点字体颜色
                    Level = 0,
                    Order = 0,
                    TreeName = "项目名称",
                    TreeCode = "节点编码",
                    ParentId = 0,
                    UpdateTime = DateTime.Now,
                    FilePath=null
                });
            }
            #endregion
            #region 一次性存储数据源，后面后面递归子集时多次使用
            List<FileNode> nodeList = new List<FileNode>();
            foreach (var item in newTree)
            {
                FileNode node2 = new FileNode();
                node2.id = item.Id;//要显示的id,此id一般为表的主键，具有唯一性
                node2.topic = item.TreeName;//要显示的名称
                node2.direction = "right";//思维导图伸向，目前只支持left/right
                node2.parentId = item.ParentId;
                node2.expanded = true;//该节点是否展开
                nodeList.Add(node2);
            }
            #endregion

            #region 装载数据源，此数据结果返回的是最终的所有结点树集合
            List<FileNode> rootNode = new List<FileNode>();
            foreach (var plist in newTree.Where(t => t.ParentId== 0))
            {
                FileNode node = new FileNode();
                node.id = plist.Id;
                node.topic = plist.Code;
                node.direction = plist.Note;//思维导图伸向，目前只支持left/right
                node.parentId = plist.ParentId;
                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;
        }
        /// <summary>
        /// 根据选择的节点ID和方向参数，获取同级的上一个节点ID或下一个节点ID
        /// </summary>
        /// <returns>上一个或下一个节点排序号</returns>
        [HttpPost]
        public JsonResult GetMoveOrder()
        {
            var id = GetQueryString("id");
            var parentId = GetQueryInt("parent", 0);
            var direction = GetQueryString("direction");
            var model = bll.GetModel(Convert.ToInt32(id));
            int upId = -1;
            int targetId = -1;//最终返回的相邻的上/下的节点ID

            if (direction == "up") //向上移动
            {
                upId = Convert.ToInt32(mo