效果图:

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

后端代码，此处以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 以树形式展示图纸目录

///

/// 视图

///

///

public ActionResult DrawingTree()

{

if (CurrentUser == null)//验证用户是否登录

return new HttpUnauthorizedResult();

return View();

}

#endregion

///

/// 文件树视图，页面初始化获取树数据，以json形式返回

///

///

public ActionResult GetTreeData()

{

List listTree = InitTree();

return Json(listTree, JsonRequestBehavior.AllowGet);

}

///

/// 初始化加载树

///

///

private List InitTree()

{

List listNodes = new List();

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 nodeList = new List();

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 rootNode = new List();

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

}

///

/// 获取子集树

///

///

///

///

private List CreateChildTree(List TreeList, FileNode filenode)

{

List nodeList = new List();

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;

}

///

/// 根据选择的节点ID和方向参数，获取同级的上一个节点ID或下一个节点ID

///

/// 上一个或下一个节点排序号

[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(model.order) - 1;

if (upId >= 0)

{

//执行修改本身

model.order= upId;

bll.Update(model);

//执行修改相邻的上一个

var list = bll.GetAllList("parentId='" + parentId+ "' and order='" + upId + "' and id<>'"+Id+"'");

if (list.Count > 0)

{

var upModel = list[0];

upModel.order= upId + 1;

bll.Update(upModel);

targetId = upModel.id;

}

}

}

else

{

upId = Convert.ToInt32(model.order) + 1;

var list = bll.GetAllList("ParentDrawingId='" + parentId+ "'");

if (upId < list.Count)

{

//执行修改本身

model.order= upId;

bll.Update(model);

//执行修改相邻的上一个

var newList = list.Where(c => c.order== upId && c.id!= model.id);

if (newList.Count() > 0)

{

var upModel = newList.FirstOrDefault();

upModel.order= upId - 1;

bll.Update(upModel);

targetId = upModel.DrawingId;

}

}

}

return Json(new

{

result = targetId.ToString()

}, JsonRequestBehavior.AllowGet);

}

}

}

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;namespaceWeb.Model.Design

{///

///节点实体类///

[Serializable]public classFileNode

{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 children { get; set; }//对应jsmind当前节点的子节点集合

}

}

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

@model List@{

ViewBag.Title = "上传文件";

}