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

柒拾~ 2016-07-18 02:51:03

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>

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

...全文