Cytoscape.js 条件查询怎么把值从前台传到后台

柒拾~ 柒拾~ 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
Cytoscape.js 条件查询出数据,怎么把前台的条件传到后台接收?
<%@ page import="com.data.xzdt.NewbieTask.Books.entity.Reader" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html lang="en">
<head>
<title>Title</title>
<script src="/static/jquery/jquery-1.12.0.min.js" ></script>
<script src="/static/bootstrap/2.3.1/js/bootstrap-select.js/" ></script>
<script src="/static/echarts/angular.min.js"></script>
<script src="/static/echarts/angular-animate.min.js"></script>
<%--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>--%>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>
<link href="/static/echarts/Angular/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
body {
font-family: helvetica;
font-size: 14px;
}
.Html1{
width: 100%;
height: 630px;
}
#cy {
width:75%;
height: 100%;
border:1px solid #CFCFCF;
float: right;
}
#selected{
width:23%;
height:100%;
align:center;
float:left;
}
</style>
<script type="text/javascript">
//页面加载时,开始下拉框
var myapp=angular.module("myapp",[]);
myapp.controller("ReaderController",function($scope,$http){
var url='${ctx}/a/reader/select_ReaderId';
$http.get(url).success(function(data){
if(data.status==0){
// alert(data.msg);
$scope.stu=data.data;
/*console.log(data.data);*/
}else if(data.status==1){
alert(data.msg);
}

});
//页面加载时,结束下拉框
var url='${ctx}/a/reader/select_ReadertType';
$http.get(url).success(function(data){
if(data.status==0){
//alert(data.msg);
$scope.stu1=data.data;
}else if(data.status==1){
alert(data.msg);
}

});
//原本是让其方法能把条件参数传到后台。。。
$scope.fn_select=function(stu,stu1){
/!*debugger*!/

console.log(stu.rid);
console.log(stu1.rtType);
$http({
method:'get',
url:'${ctx}/a/reader/select_ReaderTJ',
params:{'tmpSource':stu.rid,'tmpTarget':stu1.rtType}
}).success(function(data){
if(data.status==0) {
alert(data.msg);
// $scope.stu1 = data.data;
}
})
}
});
//重置
function fn_cole() {
$("#a").val("");
$("#b").val("");
}
//当页面加载是的动作。
$(function(){
//cytoscape被设置成用div来绘图。
var cy=window.cy=cytoscape({
//容器
container:document.getElementById('cy'),
//选中不启动
boxSelectionEnabled: false,
autounselectify: true,
style: [
{
//选择器(节点元素)
selector: 'node',
style: {
//显示的内容
'content': 'data(name)',
//根据自己想要的样式
'shape': 'data(faveShape)',
//文本的不透明度
'text-opacity': 0.5,
//位置居中
'text-valign': 'center',
//文本靠右
'text-halign': 'right',
//背景颜色,红色
'background-color': 'red'
}
},

{
//选择器(关系之间的样式)
selector: 'edge',
style: {
'width': 4,
//箭头指向的形状(三角形)
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
//箭头的颜色
'target-arrow-color': 'yellow',
//路线(曲线)
'curve-style': 'bezier'
}
},
{
selector:'edge.questionable',
style:{
'line-style': 'dotted',
'target-arrow-shape': 'diamond'
}
}
]
});
//节点元素
var cy1 = $("#cy").cytoscape("get");
<% ArrayList<Reader> nodes = (ArrayList<Reader>)session.getAttribute("list");
for(int i=0;i<nodes.size();i++){
%>
var tmpId="<%=nodes.get(i).getRid()%>";
var a="<%=nodes.get(i).getRname()%>";
var tmpWeight = <%=nodes.get(i).getRtType()%>;
cy1.add({group: "nodes", data: { id: tmpId ,name:a, weight: tmpWeight,faveColor:'green',faveShape:'triangle'}});
<%
}
%>
//关系
<% ArrayList<Reader> edges = (ArrayList<Reader>)session.getAttribute("list");
for(int i=0;i<edges.size();i++){
%>
var tmpSource="<%=edges.get(i).getRid()%>";
var tmpTarget="<%=edges.get(i).getRtType()%>";
cy1.add({ group: "edges", data: { source: tmpSource, target: tmpTarget ,classes: 'questionable' } });
<%
}
%>
//选择
options = {
//图形显示的方式
name: 'dagre',
fit: true, //是否符合视窗图形
ready: undefined, //在布局准备回调
stop: undefined, //回调布局停止
rStepSize: 10, //如果节点不适合屏幕,增加半径。
padding: 30, //填充
startAngle: 3/2 * Math.PI, //第一个节点的位置
counterclockwise: false //布局是否应该是逆时针或顺时针

};

cy1.layout( options );
});
function fn_select_1(){
alert("测试");
$("#btn").submit();
}
</script>
</head>
<body>
<div class="Html1">
<div id="cy"></div>
<div id="selected" ng-app="myapp" ng-controller="ReaderController">
<label>开始:</label><select id="a" ng-model="stu.rid" class="form-control" ng-options="a.rid for a in stu" ></select></br>
<label>结束:</label><select id="b" class="form-control" ng-model="stu1.rtType" ng-options="b.rtType for b in stu1"></select></br>
<button id="btn" class="btn btn-primary" type="submit" ng-click="fn_select(stu,stu1)">查-询</button>
<button class="btn btn-primary" type="submit" onclick="fn_cole()">重 置</button></br>
</div>
</div>
</body>
</html>


求各位大神指点,这个地方我已经卡了很多天了,跪谢了,希望详细一点。。。
...全文

相关推荐

Graph-Cytoscape-Project:使用 Javascript、Neo4j 和 Cytoscape 绘制 Cytoscape 图形

cs252-项目 图细胞景观

巩硕

cytoscape_py2neo:用于学习如何从 py2neo 获取 neo4j 图形数据并使用 cytoscape.js 显示图形

cytoscape_py2neo 用于学习如何从 py2neo 获取 neo4j 图形数据并使用 cytoscape.js 显示图形

在南极找不到南

Python语言实现Neo4j数据库Web可视化(cytoscape)开发

Python语言实现Neo4j数据库Web可视化(cytoscape)开发 【项目资源】:包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源,毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】:适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

小风飞子

Lattice-of-cuboid-dynamic:基于Web的长方体实现的网格的动态版本。 使用Cytoscape绘图

立方格子 基于Web的长方体实现的网格的动态版本。 使用Cytoscape作图。

Machinery Ly

cytoscape_neo4j:用cytoscape.js展示neo4j网络关系图

用cytoscape.js展示neo4j网络关系图 用可视化的方式来展示网络关系图是一件挺有趣的事情,在选定用cytoscape.js来显示neo4j图形数据库的数据后我做了一个原型,并用下面三篇博客来记录了做原型的过程。

cestZOE
评论 1
收藏 已收藏
分享
返回顶部
柒拾~
JavaScript 87,984 成员 224,681 内容