效果图:
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 = "上传文件";
}