<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="https://java.sun.com/jsp/jstl/core" prefix="c" %>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value="/zTree_v3/js/jquery-1.4.4.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/vis/dist/vis.js" />"></script>
<style type="text/css">
#mynetwork {
width: 1000px;
height: 1000px;
border: 1px solid lightgray;
}
</style>
</HEAD>
<BODY>
<div id="mynetwork"></div>
<script type="text/javascript">
//获取nodes
/**/
var nodes;
var edges;
function getNodesFunction(){
$.ajax({
async : false,
cache:false,
type: 'POST',
dataType : "json",
url: "getNodes",//请求的action路径 ，从后台JAVA获取
error: function () {//请求失败处理函数
alert('数据读取失败');
},
success:function(data){ //请求成功后处理函数。
//获取edges
nodes=data[0].nodes; //从json数据中获取nodes
edges=data[0].edges; //从edges数据中获取edges
}
});
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {//配置
hierarchicalLayout: true,//因为我是配置成二叉树，所以在这里设置了
stabilize:false,
nodes://节点参数配置
{
},
edges: //连线参数配置
{
style: 'arrow',//箭头
arrowScaleFactor:2,
}
};
var network = new vis.Network(container, data, options);
}
getNodesFunction();
/*规范的nodes,edges格式
var nodes = [{id:1,label:'node1',level:0}, {id:2,label:'node2',level:1}, {id:3,label:'node3',level:1}];*/
/*
{id:1,label:'node1',level:0},
{id:2,label:'node2',level:1},
{id:3,label:'node3',level:2}
];
*/
/*
var edges= [{from:1,to:2,label:'c1'}, {from:2,to:3,label:'c2'}];*/
/*
[
{from:1,to:2,label:'c1'},
{from:2,to:3,label:'c2'}
];
*/
/*
*/
/*
// create an array with nodes 定义节点和连线关系
var nodes = [
{id: 1, label: '比和牵引通风机扳钮时操纵台I架',shape: 'box',level:0},//level必须从0开始
{id: 2, label: '断电降弓活动',shape: 'box',level:1},
{id: 3, label: '图片',image:'<%=request.getContextPath()%>/pic/3.jpg', shape: 'image',level:1},
{id: 4, label: 'Node 4',shape: 'box',level:2},
{id: 5, label: 'Node 5',shape: 'box',level:2}
];
// create an array with edges
var edges = [
{from: 1, to: 2, label:'不好'},
{from: 1, to: 3,length:600 },
{from: 2, to: 4, },
{from: 2, to: 5, }
];
*/
</script>
</BODY>
</HTML><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 St
阅读背景：
利用VIS插件调用后台数据库显示动态流程图
来源：互联网
分享到：
