利用VIS插件调用后台数据库显示动态流程图

最新推荐文章于 2024-08-05 13:23:57 发布

dinner1984

最新推荐文章于 2024-08-05 13:23:57 发布

阅读量2.2k

点赞数

分类专栏： jquery 文章标签： java vis json 生成流程图

本文链接：https://blog.csdn.net/dinner1984/article/details/37757253

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://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>

getNodes内容

	@RequestMapping(value="/getNodes", method=RequestMethod.POST)
	public void getNodes(HttpServletRequest request,HttpServletResponse response) throws IOException{
		
		//nodes 获取节点列表
		List<Flow> queryResult=flowService.getAll();
		List<String> lstTree = new ArrayList<String>(); 
		
		for(Flow flow:queryResult)
		{
			//name != null && !name.equals("")
			if( (null!=flow.getImagepath())&&(!"".equals(flow.getImagepath())) )
			{
				lstTree.add( ("{id:"+flow.getFid()+",label:'"+flow.getLabel()+"',level:"+flow.getLevelid()+","+
						 "image:'<%=request.getContextPath()%>"+flow.getImagepath().toString()+"',shape:'image'"+
						 "}").replace("\"","")  );//生成符合格式的内容
			}
			else
			{
				
				lstTree.add( ("{id:"+flow.getFid()+",label:'"+flow.getLabel()+"',level:"+""+flow.getLevelid()+
						 "}").replace("\"","") );
			}
			

			
		}
		
		
		//edges
		List<String> lstTree2 = new ArrayList<String>(); 
		
		for(Flow flow:queryResult)//生成符合格式的内容
		{
			StringBuilder stringFlow = new StringBuilder("");//组合
			if( (null!=flow.getNextid()) &&(!"".equals( String.valueOf(flow.getNextid()) )) )//下一个节点不为空
			{
				System.out.println(" nextIdString is "+String.valueOf(flow.getNextid()) );
				
				if( (null!=flow.getLength()) &&(!"".equals( String.valueOf(flow.getLength()) )) )//线段的长度不为空
				{
					
					stringFlow=new StringBuilder( (stringFlow.toString()+"{from:"+flow.getFid()+",to:"+flow.getNextid()+",label:'"+flow.getEdgeslabel()+"',length:"+flow.getLength()+"}").replace("\"","") );
				}
				else
				{
					
					stringFlow=new StringBuilder( (stringFlow.toString()+"{from:"+flow.getFid()+",to:"+flow.getNextid()+",label:'"+flow.getEdgeslabel()+"'"+"}").replace("\"","") );
				}
			}
			else
			{
				break;
				
				
			
			}
			System.out.println( stringFlow.toString() );
			lstTree2.add(stringFlow.toString());
			
		}
		
		List<String> allList=new ArrayList<String>();

		

		response.getWriter().print(  JSONArray.fromObject("[{\"nodes\":\""+lstTree+"\",\"edges\":\""+lstTree2 +"\"}]").toString()  );//打包成JSON对象
	}