jsMind思维导图模式展示数据

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(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);
} }
}

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当前节点的子节点集合
}
}

@model List<Model.Admin.TreeData>
@{
ViewBag.Title = "上传文件";
}<div class="bim-cont">
<div class="bim-forms bg-none">
<form class="form-inline">
<div class="form-group">
<input type="hidden" id="moveDirection" value="up" />
<input type="text" class="form-control" id="keywords" placeholder="请输入节点名称">
</div>
<button type="button" class="btn js-btn-class margin" οnclick="search()">检索</button>
</form>
</div> <div class="box table-responsive border-top-none" id="contentbody" style="overflow: hidden;">
<div id="layout">
<div id="jsmind_container"></div>
<div style="display: none">
<input class="file" type="file" id="image-chooser" accept="image/*" />
</div>
</div>
</div>
</div>
<!--右侧菜单-->
<div id="divmenu" class="menu">
<ul>
<li οnclick="expand_all()" class="pub">展开所有</li>
<li οnclick="collapse_all()" class="pub">合并所有</li>
<li οnclick="zoomIn()" class="pub">画布放大</li>
<li οnclick="zoomOut()" class="pub">画布缩小</li>
<li οnclick="add_node();" class="add">新增节点</li>
<li οnclick="add_upfile();" class="upload">上传文件</li>
<li οnclick="show_selected();" class="sel">查看节点</li>
<li οnclick="remove_node()" class="delete">删除</li>
<li οnclick="move_node('up')" class="move">上移</li>
<li οnclick="move_node('down')" class="move">下移</li>
</ul>
</div>
@section Styles{
<link type="text/css" rel="stylesheet" href="~/Content/plugins/jsmind/style/jsmind.css" />
<style>
.bim-forms {
border-bottom: solid 1px #f5f1f1;
} .bim-forms .btn {
padding: 6px 12px;
} .menu {
width: 100px;
font-size: 14px;
font-family: "微软雅黑";
border: 1px solid #ccc;
z-index: 9999;
position: absolute;
display: none;
background: #f2f2f2;
} .menu ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
} .menu ul li {
padding: 3px 0px;
font-size: 12px;
} .menu ul li:hover {
background: #e1dddd;
} .menu ul li a:link {
color: #000;
text-decoration: none;
}
</style>
}
@section Scripts{
<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: false
}
_jm = jsMind.show(options);
} var jm = 0;
function auto_height() {
if (jm == 0) jm = $(".root").offset().top - ($("#jsmind_container").parent().height() / 2) - ($("body").height() / 2) -140; //获取中心点位置
var cavHeight = $("#jsmind_container").find("canvas").height();//-3703
$("#jsmind_container").height(cavHeight); //将画布高度设置与拖动层
$("#jsmind_container").offset({ top: ((0 - jm)), left: ($("body").width() / 10) }); //将中心点调至屏幕中心
} //预览文件
function showFile(filepath) {
layer.photos({ photos: { "data": [{ "src": filepath }] }, anim: 5 });
} $(function () {
//初始化装载数据
open_empty();
InitJsMind();
dragFunc("jsmind_container");
//监听右侧菜单点击事件，发生点击则隐藏菜单层
$("#divmenu").click(function (event) {
var $this = $(event.target);
$("#divmenu").hide();
});
//画布添加鼠标点击事件
$('#jsmind_container').mousedown(function (e) {
if (e.which == 1) { // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
$("#divmenu").hide();
}
}); $("#contentbody").bind("contextmenu", function () {
var div = $("#divmenu");
if (showmenu()) div.css({ "left": document.body.scrollLeft + event.clientX - 125, "top": document.body.scrollTop + event.clientY - 60 }).show(); return false;
});
}); //页面初始化获取树数据
function InitJsMind() {
$.get("/Admin/GetTreeData", function (data) {
var str = JSON.stringify(data);
str = str.slice(1); //删除第一个字符[
str = str.substring(0, str.length - 1);//删除 最后一个字符]
re = new RegExp("background", "g"); //定义正则表达式，g标识全部替换
var newstr = str.replace(re, "background-color");
re = new RegExp("foreground", "g"); //定义正则表达式，g标识全部替换
newstr = newstr.replace(re, "foreground-color");
var jsonData = $.parseJSON(newstr);
console.log(jsonData);
//加载模型树
var mind = {
"meta": {
"name": "",
"author": "",
"version": "0"
},
"format": "node_tree",//node_array
"data": jsonData
}
_jm.show(mind);
auto_height();
})
} //新增节点
function add_node() {
var selected_node = _jm.get_selected_node(); // as parent of new node
if (!selected_node) { layer.msg('请选择一个节点！'); return; }
var fHeight = 280;
if (selected_node.data.leave == 0) { //根节点新增时因为字段多，高度单独做调整
fHeight = 420;
}
layer_show('新增节点', '/Admin/Add?Id=' + selected_node.id, 600, fHeight);
}
//新增、变更节点完成后子页面调此方法
function append_node(newNode) {
_jm.enable_edit();//新增前置为可编辑状态
var selected_node = _jm.get_selected_node(); // as parent of new node
if (!selected_node) { prompt_info('请先选择一个节点.'); return; }
//处理json数据
var str = JSON.stringify(newNode);
re = new RegExp("background", "g"); //定义正则表达式，g标识全部替换
var newstr = str.replace(re, "background-color");
re = new RegExp("foreground", "g"); //定义正则表达式，g标识全部替换
newstr = newstr.replace(re, "foreground-color");
var jsonData = $.parseJSON(newstr);
//delete jsonData["direction"];
console.log(jsonData);
//开始新增
var nodeid = newNode.id;
var topic = newNode.topic;
var node = _jm.add_node(selected_node, nodeid, topic, jsonData);
_jm.disable_edit();//新增前置为不可编辑状态
}
//文件变更
function update_nodes() {
var selected_node = _jm.get_selected_node(); // as parent of new node
if (!selected_node) { layer.msg('请选择一个节点！'); return; }
var isLastNode = Object.keys(selected_node.children).length;
if (isLastNode > 0) {
layer.msg('请选择文件节点进行变更！');
} else {
if (selected_node.id == 0) { //中心根节点不能直接上传文件
layer.msg("根节点不可上传！", { icon: 0 });
}
else {
layer_show('文件变更', '/Admin/Update?Id=' + selected_node.id, 700, 540);
}
}
}
//文件变更后子页面调父页面方法
function update_node(nodeid, topic) {
_jm.enable_edit();//置为可编辑状态
_jm.update_node(nodeid, topic);
_jm.disable_edit();//置为不可编辑状态
}
//上移、下移节点，direction(top,bottom)
function move_node(direction) { var selected_node = _jm.get_selected_node();
$("#moveDirection").val(direction);
$.post("/Admin/GetMoveOrder", { Id: selected_node.id, parentId: selected_node.data.parentId, direction: direction }, function (d) {
if (d.result != -1) {
_jm.enable_edit();//置为可编辑状态
_jm.move_node(selected_node.id, d.result);
_jm.disable_edit();//置为不可编辑状态
} else {
if (direction=="up") {
layer.msg("已经是最顶级！", { icon: 0 });
} else {
layer.msg("已经是最下级！", { icon: 0 });
}
}
});
}
//上传文件
function add_upfile() {
var selected_node = _jm.get_selected_node();
if (!selected_node) { layer.msg('请选择一个节点！'); return; }
var isLastNode = Object.keys(selected_node.children).length;
if (isLastNode > 0) {
layer_show('文件上传', '/Admin/upload?Id=' + selected_node.id, 700, 540);
} else {
if (selected_node.id == 0) { //中心根节点不能直接上传文件
layer.msg("根节点不可上传！", { icon: 0 });
} else {
layer_show('文件上传', '/Admin/upload?Id=' + selected_node.id, 700, 540);
}
}
}
//删除节点
function remove_node() {
var selected_node = _jm.get_selected_node(); // as parent of new node
if (!selected_node) { layer.msg('请选择一个节点！'); return; }
var isLastNode = selected_node.children.length;
if (isLastNode > 0) {
layer.msg('存在子集，不能删除！');
} else {
layer.confirm('确认要删除吗？', function (index) {
jQuery.post("/Admin/Delete?Id=" + selected_node.id, function (msg) {
if (msg == 1) {
//InitJsMind();
_jm.enable_edit();//新增前置为可编辑状态
_jm.remove_node(selected_node.id);
_jm.disable_edit();//新增前置为不可编辑状态
layer.msg('已删除!', { icon: 1, time: 1000 });
} else {
layer.msg('操作失败!', { time: 1000 });
}
});
});
}
}
//节点查看
function show_selected() {
var selected_node = _jm.get_selected_node(); // as parent of new node
if (!selected_node) { layer.msg('请选择一个节点！'); return; }
if (selected_node.id == 0) { layer.msg('根节点不支持查看！'); return; } var layer_height = 420;
if (selected_node.data.leave > 0) layer_height = 280;
if (selected_node.data.leave == 1) layer_height = 420;
layer_show('节点查看', '/Admin/Show?Id=' + selected_node.id, 600, layer_height);
} //展开选择的节点
function expand() {
var selected_id = get_selected_nodeid();
if (!selected_id) { layer.msg('please select a node first.'); return; } _jm.expand_node(selected_id);
}
//合并选择的节点
function collapse() {
var selected_id = get_selected_nodeid();
if (!selected_id) { layer.msg('please select a node first.'); return; } _jm.collapse_node(selected_id);
}
//展开所有节点
function expand_all() {
_jm.expand_all();
$("#jsmind_container").offset({ top: ((0 - jm)), left: 100 }); //将中心点调至屏幕中心
}
//合并所有节点
function collapse_all() {
_jm.collapse_all();
$("#jsmind_container").offset({ top: ((0 - jm)), left: 100 }); //将中心点调至屏幕中心
}
//画布缩小
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 dragFunc(id) {
var Drag = document.getElementById(id);
Drag.onmousedown = function (event) {
var ev = event || window.event;
event.stopPropagation();
var disX = ev.clientX - Drag.offsetLeft;
var disY = ev.clientY - Drag.offsetTop;
document.onmousemove = function (event) {
var ev = event || window.event;
Drag.style.left = ev.clientX - disX + "px";
Drag.style.top = ev.clientY - disY + "px";
Drag.style.cursor = "move";
};
};
Drag.onmouseup = function () {
document.onmousemove = null;
this.style.cursor = "default";
};
}; //通过JS屏蔽自带右键菜单
document.oncontextmenu = function (e) {
return false;
} //动态化展示右键菜单
function showmenu(selected_node) {
var selected_node = _jm.get_selected_node(); // as parent of new node if (!selected_node) {
$("#divmenu ul li:not(.pub)").hide();
$("#divmenu ul li[class='pub']").show();
}
else {
if ((selected_node.isroot || false)) {
$("#divmenu ul li:not(.add)").hide();
$("#divmenu ul li[class='add']").show();
}
else if (selected_node.data.leave == 1) {
if (selected_node.children.length > 0) {
$(".pub,.update,.view,.history,.delete").hide();
$(".sel,.upload,.add,.move").show();
} else {
$(".pub,.update,.view,.history").hide();
$(".sel,.upload,.add,.move,.delete").show();
}
}
else {
if (selected_node.children.length > 0) {
$(".pub,.view,.history,.update,.delete").hide();
$(".upload,.sel,.add,.move").show();
}
else {
if (selected_node.data.filepath == "null" || selected_node.data.filepath == undefined) {
$(".upload,.sel,.delete,.add,.move").show();
$(".pub,.view,.history,.update").hide();
} else {
$(".view,.delete,.update,.history,.move").show();
$(".pub,.sel,.upload,.add").hide();
}
}
}
}
return true;
} //搜索
function search() {
var count = 0;
if($.trim($("#keywords").val()).length == 0) {
InitJsMind();
} else {
//InitJsMind();
$('jmnode').each(function (i, e) {
var code = $(this).attr("code");
if (code != undefined) {
code = $(this).attr("code").toLowerCase();
var filenode = "<span>" + $("#keywords").val().toLowerCase() + "</span>";
if ($(this).html().toLowerCase().indexOf($("#keywords").val().toLowerCase()) != -1 || $(this).html().toLowerCase().indexOf(filenode) != -1 || code.indexOf($("#keywords").val().toLowerCase()) != -1) {
$(this).addClass("root selected");
$(this).css("opacity","0.9");
count = parseInt(count) + 1;
if (count == 1) {
auto_height();//恢复位置
console.log(code);
var jm2 = $(this).css("top").replace("px", ""); //获取当前点位置
$("#jsmind_container").offset({ top: ((0 - parseInt(jm2))+($("body").height()/2)), left: ($("body").width() / 10) }); //将中心点调至屏幕中心
}
} else {
$(this).removeClass("root selected");
$(this).css("opacity", "0.1"); //没找到的元素透明的设高
}
}
});
if (count == 0) {
layer.msg('未检索到任何数据！');
}
}
}
//鼠标滚轮缩放
window.onmousewheel = document.onmousewheel = function (e) {
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
_jm.view.zoomIn()
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
_jm.view.zoomOut();
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail > 0) { //当滑轮向下滚动时
_jm.view.zoomOut();
}
if (e.detail < 0) { //当滑轮向上滚动时
_jm.view.zoomIn()
}
}
}
</script>
}