<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./assets/bootstrap-3.3.0-dist/css/bootstrap.css" rel="stylesheet">
<link href="./assets/css/toastr.css" rel="stylesheet">
<link href="./assets/font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="./zTree/css/demo.css" type="text/css">
<link rel="stylesheet" href="./zTree/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<style type="text/css">
html {
min-width: 800px;
}
body {
margin: 0 auto;
font-size: 12px;
height: 550px;
}
input.form-control,button.btn {
font-size: 12px;
height: 25px;
line-height: 12px;
}
#container {
width: 100%;
height: 500px;
overflow: hidden;
background-color: #FAFAFA;
}
#bottom {
width: 100%;
height: 50px;
}
#logInfo {
width: 60%;
min-width: 480px;
height: 150px;
position: absolute;
top: 385px;
overflow-y: auto;
z-index: 99;
background: #FFF;
border: 1px solid #D2D2D2;
display: none;
}
#footer {
text-align: right;
line-height: 13px;
padding-right: 10px;
width: 60%;
height: 15px;
position: relative;
top: 35px;
border-radius: 2px;
border: 1px solid #646464;
cursor: pointer;
background-image: url("./images/bg.png");
background-repeat: repeat;
}
#footer:HOVER {
opacity:0.8;
}
#pageLeft {
border: 1px solid #D2D2D2;
height: 500px;
float: left;
width: 15%;
}
#icon {
float: left;
height: 500px;
padding: 235px 0px;
}
#icon2 {
float: right;
height: 500px;
padding: 235px 0px 235px 5px;
}
#angle {
border-top: 1px solid #D2D2D2;
border-right: 1px solid #D2D2D2;
border-bottom: 1px solid #D2D2D2;
padding: 5px 2px;
cursor: pointer;
}
#angle2 {
border-top: 1px solid #D2D2D2;
border-left: 1px solid #D2D2D2;
border-bottom: 1px solid #D2D2D2;
padding: 5px 2px;
cursor: pointer;
}
#leftTop {
background-color: #E9EAEA;
height: 35px;
line-height: 25px;
padding: 5px 15px;
letter-spacing: 5px;
font-size: 18px;
font-family: 'Microsoft Yahei', sans-serif;
}
.pageLeft {
margin: 2px 5px;
padding: 2px 2px;
}
#pageRight {
margin: 0px 5px;
float: right;
width: 60%;
height: 500px;
background: url("./editors/images/grid.gif");
border: 1px solid #D2D2D2;
}
input.form-control,button.btn {
height: 25px;
line-height: 12px;
}
.btn-black {
color: #FFF;
background-color: #444;
}
button.btn-black:HOVER {
color: #FFF;
background-color: #4D5457;
}
a.btn-black:HOVER {
color: #FFF;
background-color: #4D5457;
}
#pageFooter{
width: 20%;
height: 100%;
padding: 5px;
float: right;
border: solid 1px #D2D2D2;
}
#db {
width: 135px;
}
#properties {
border: solid 1px #D2D2D2;
padding: 10px;
width: 100%;
height: 150px;
background-color: white;
}
#window {
width: 100%;
height: 160px;
overflow: auto;
color: white;
font-family: Arial;
font-size: 10px;
padding: 4px;
background: black;
opacity: 0.5;
}
#showDB{
float: right;
width: 200px;
height: 200px;
}
.ztree li a {
color: #555;
}
.ztree li li {
padding: 5px 0px;
font-size: 25px;
}
.ztree li span.button.ico_docu {
margin-right: 2px;
background: url(./zTree/css/zTreeStyle/img/diy/dap_olap_16.png) no-repeat
scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle
}
input {
vertical-align: middle;
margin: 0;
padding: 0;
}
/*******************************/
.file-box {
position: relative;
width: 340px;
margin-left: 0px;
}
.txt {
height: 22px;
border: 1px solid #cdcdcd;
width: 180px;
}
.file {
position: absolute;
top: 0;
right: 80px;
height: 24px;
filter: alpha(opacity : 0);
opacity: 0;
width: 260px
}
</style>
<title>创建流程</title>
</head>
<!-- 页面载入时启动程序 -->
<body οnlοad="main()">
<div id="container">
<div id="pageLeft">
<div id="leftTop"><i class="fa fa-th-list"></i> <label>操作</label></div>
<ul id="treeDemo" class="ztree pageLeft"></ul>
</div>
<div id="icon"><div id="angle" οnclick="toggleIcon();"><i class="fa fa-angle-double-left"></i></div></div>
<div id="pageFooter" class="footer">
<div id="setDBButton" class="form-inline" style="display: none;">
<input type="text" id="db" class="form-control" />
<button type='button' class="btn btn-black" onClick='setValue();' >Imput</button>
</div>
<br />
<button type="button" class="btn btn-black" οnclick="exc()">Excute</button>
<br>
<br>
<div id="properties">
</div>
<br>
<div id="window"></div>
</div>
<div id="icon2"><div id="angle2" οnclick="toggleIcon2();"><i class="fa fa-angle-double-right"></i></div></div>
<div id="pageRight"></div>
</div>
<div id="bottom">
<div id="footer" title="Log" οnclick="showLog();"><i class="fa fa-caret-up"></i> </div>
</div>
<div id="logInfo">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</body>
<script type="text/javascript" src="./assets/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./assets/js/toastr.js"></script>
<script type="text/javascript" src="./assets/bootstrap-3.3.0-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="./editors/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="./zTree/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript">
mxBasePath = './src';
</script>
<script type="text/javascript" src="./src/js/mxClient.js"></script>
<script type="text/javascript">
var resource = null;
var portValue = null;
var val = null;
var objv1 = null;
var iv1length = 0;
var ev1length = 0;
var gra=null;
var calculationMap = {};
var hints = document.getElementById("window");
var setting = {
view: {
showLine: false
},
data: {
simpleData: {
enable: true
}
}
};
toastr.options = {
positionClass:"toast-top-center",
timeOut: "1000"
}
function main() {
/* $.ajax({
type : "get",
url : "InitDataServlet",
dataType : "json",
async : false,
success : function(data) {
resource = data;
},
error : function(data) {
resource = data;
}
}); */
resource = [{"id":1,"pId":0,"name":"初始化数据","open":true,"f1":"","tablename":""},{"id":2,"pId":0,"name":"运算法则","open":true,"f1":"","tablename":""},{"id":3,"pId":0,"name":"序列化ID","open":true,"f1":"","tablename":""},{"id":11,"pId":1,"name":"Data","open":false,"f1":"function calc(x){return 2x+1;}","tablename":{"label":"Data","calculate":"","img":"images/icons48/server.png","import":"exa","export":"ori"}},{"id":21,"pId":2,"name":"addition","open":false,"f1":"function calc(x){return 2x+1;}","tablename":{"label":"addition","calculate":"+","img":"images/icons48/column.png","import":"exa","export":"exa"}},{"id":22,"pId":2,"name":"subtraction","open":false,"f1":"function calc(x){return 2x+1;}","tablename":{"label":"subtraction","calculate":"-","img":"images/icons48/earth.png","import":"exa","export":"exa"}},{"id":23,"pId":2,"name":"multiplication","open":false,"f1":"function calc(x){return 2x+1;}","tablename":{"label":"multiplication","calculate":"*","img":"images/icons48/gear.png","import":"exa","export":"exa"}},{"id":24,"pId":2,"name":"division","open":false,"f1":"function calc(x){return 2x+1;}","tablename":{"label":"division","calculate":"/","img":"images/icons48/keys.png","import":"exa","export":"ori"}},{"id":31,"pId":3,"name":"generateId","open":false,"f1":"function calc(x){return 2x+1;}","tablename":{"label":"generateId","calculate":"","img":"images/icons48/keys.png","import":"exa","export":"ori"}}];
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, resource);
if (!mxClient.isBrowserSupported()) {
mxUtils.error('浏览器不支持mxGraph！', 200, false)
} else {
mxEvent.disableContextMenu(document.body);
var container = document.getElementById("pageRight");
var sidebar = document.getElementById("treeDemo");
// 定义全局变量，如。用于触发建立新的连接的活动区域的最小尺寸（以像素为单位），该部分（100％）的小区区域被用于触发新的连接，以及一些窗口和“下拉菜菜单选择
mxConstants.MIN_HOTSPOT_SIZE = 16;
mxConstants.DEFAULT_HOTSPOT = 1;
// 显示导航线
mxGraphHandler.prototype.guidesEnabled = true;
// Alt 键禁用导航线
mxGuide.prototype.isEnabledForEvent = function(evt)
{
return !mxEvent.isAltDown(evt);
};
// 自动导航目标
mxEdgeHandler.prototype.snapToTerminals = true;
// IE浏览器样式修复
if (mxClient.IS_QUIRKS)
{
document.body.style.overflow = 'hidden';
new mxDivResizer(container);
new mxDivResizer(outline);
new mxDivResizer(toolbar);
new mxDivResizer(sidebar);
new mxDivResizer(status);
}
var model = new mxGraphModel();
var graph = new mxGraph(container, model);
// 启用高亮工具栏
graph.setDropEnabled(false);
// 连接预览
graph.connectionHandler.getConnectImage = function(state)
{
return new mxImage(state.style[mxConstants.STYLE_IMAGE], 16, 16);
};
// 显示中心端口图标
graph.connectionHandler.targetConnectImage = true;
// 禁止连接线晃动
graph.setAllowDanglingEdges(false);
// 目标是否有效
graph.isValidDropTarget = function(cell, cells, evt)
{
return this.isSwimlane(cell);
};
// 是否根元素
graph.isValidRoot = function(cell)
{
return this.isValidDropTarget(cell);
}
// 是否可以被选中
graph.isCellSelectable = function(cell)
{
return !this.isCellLocked(cell);
};
// 展示cell的label
graph.getLabel = function(cell)
{
//var label = (this.labelsVisible) ? this.convertValueToString(cell) : '';
var label = mxGraph.prototype.getLabel.apply(this, arguments);
var geometry = this.model.getGeometry(cell);
if (label != null && this.model.isVertex(cell))
{
if(cell.children != null && cell.children.length>0){ //如果是父级vertex则遍历子元素，分别执行getLabel方法
for ( var i = 0; i < cell.children.length; i++) {
graph.getLabel(cell.children[i]);
continue;
}
}
var style = this.getCellStyle(cell); //底层vertex开始执行处，只有接口图标的label的fontstyle为2，此时就返回空
var fontStyle = style[mxConstants.STYLE_FONTSTYLE];
if (2==fontStyle)
{
return '';
}
}
return label; //底层vertex但不是接口图标，此时正常显示label
}
// 禁用HTML的泳道标签，避免冲突
// 判断是否为泳道标签
graph.isHtmlLabel = function(cell)
{
return !this.isSwimlane(cell);
}
// To disable the folding icon, use the following code:
graph.isCellFoldable = function(cell)
{
return false;
}
// 双击显示模型窗口
graph.dblClick = function(evt, cell)
{
// 如果不是双击事件，编辑器会自动处理
if (this.isEnabled() &&
!mxEvent.isConsumed(evt) &&
cell != null &&
this.isCellEditable(cell))
{
if (this.model.isEdge(cell) ||
!this.isHtmlLabel(cell))
{
this.startEditingAtCell(cell);
}
else
{
var content = document.createElement('div');
content.innerHTML = this.convertValueToString(cell);
showModalWindow(this, 'Properties', content, 400, 300);
}
}
// 禁用任何默认双击行为
mxEvent.consume(evt);
};
// 启用新连接
graph.setConnectable(true);
var keyHandler = new mxKeyHandler(graph); //允许键盘操作
keyHandler.bindKey(46, function(evt) //允许delete键删除
{
if (graph.isEnabled()) {
graph.removeCells();
}
});
var rubberband = new mxRubberband(graph); //允许矩形区域来选择
// 配置样式
configureStylesheet(graph);
/* hints.style.position = 'absolute';
hints.style.overflow = 'hidden';
hints.style.width = '230px';
hints.style.bottom = '56px';
hints.style.height = '160px';
hints.style.right = '20px';
hints.style.overflow = 'auto';
hints.style.background = 'black';
hints.style.color = 'white';
hints.style.fontFamily = 'Arial';
hints.style.fontSize = '10px';
hints.style.padding = '4px';
mxUtils.setOpacity(hints, 50);
document.body.appendChild(hints); */
// Adds an option to view the XML of the graph
/* document.getElementById("pageFooter").appendChild(mxUtils.button('View XML', function()
{
var encoder = new mxCodec();
var node = encoder.encode(graph.getModel());
mxUtils.popup(mxUtils.getPrettyXml(node), true);
})); */
var doc = mxUtils.createXmlDocument();
// 添加侧边栏图标
for ( var i = 0; i < resource.length; i++) {
if(resource[i].tablename){
addSidebarIcon(doc,graph, sidebar, resource[i].tablename, resource[i].tablename.img);
calculationMap[resource[i].tablename.label] = resource[i].tablename.calculate;
}
}
// Implements a properties panel that uses
// mxCellAttributeChange to change properties
graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt)
{
selectionChanged(graph);
});
selectionChanged(graph);
}
gra = graph;
}
/**
* Updates the properties panel
*/
function selectionChanged(graph)
{
var div = document.getElementById('properties');
// Forces focusout in IE
graph.container.focus();
// Clears the DIV the non-DOM way
div.innerHTML = '';
// Gets the selection cell
var cell = graph.getSelectionCell();
if (cell == null)
{
mxUtils.writeln(div, 'Nothing selected.');
}
else if(mxUtils.isNode(cell.value))
{
// Writes the title
var center = document.createElement('center');
mxUtils.writeln(center, cell.value.nodeName + ' ( y=firstValue' + cell.value.attributes.calc.nodeValue + 'x+secondValue )'); //.value.attributes.secondValue.nodeValue
div.appendChild(center);
mxUtils.br(div);
// Creates the form from the attributes of the user object
var form = new mxForm();
var attrs = cell.value.attributes;
for (var i = 0; i < attrs.length-1; i++) //-1是为了不让calc属性（运算符）显现出来，避免被用户修改
{
createTextField(graph, form, cell, attrs[i]);
}
div.appendChild(form.getTable());
mxUtils.br(div);
}else{
mxUtils.writeln(div, 'Nothing selected.');
}
}
/**
* Creates the textfield for the given property.
*/
function createTextField(graph, form, cell, attribute)
{
var input = form.addText(attribute.nodeName + ':', attribute.nodeValue);
var applyHandler = function()
{
var newValue = input.value || '';
var oldValue = cell.getAttribute(attribute.nodeName, '');
if (newValue != oldValue)
{
graph.getModel().beginUpdate();
try
{
var edit = new mxCellAttributeChange(
cell, attribute.nodeName,
newValue);
graph.getModel().execute(edit);
//graph.updateCellSize(cell);
}
finally
{
graph.getModel().endUpdate();
}
}
};
mxEvent.addListener(input, 'keypress', function (evt)
{
// Needs to take shift into account for textareas
if (evt.keyCode == /*enter*/13 &&
!mxEvent.isShiftDown(evt))
{
input.blur();
}
});
if (mxClient.IS_IE)
{
mxEvent.addListener(input, 'focusout', applyHandler);
}
else
{
// Note: Known problem is the blurring of fields in
// Firefox by changing the selection, in which case
// no event is fired in FF and the change is lost.
// As a workaround you should use a local variable
// that stores the focused field and invoke blur
// explicitely where we do the graph.focus above.
mxEvent.addListener(input, 'blur', applyHandler);
}
}
// 显示静态窗口
function showModalWindow(graph, title, content, width, height)
{
var background = document.createElement('div');
background.style.position = 'absolute';
background.style.left = '0px';
background.style.top = '0px';
background.style.right = '0px';
background.style.bottom = '0px';
background.style.background = 'black';
mxUtils.setOpacity(background, 50);
document.body.appendChild(background);
if (mxClient.IS_IE)
{
new mxDivResizer(background);
}
var x = Math.max(0, document.body.scrollWidth/2-width/2);
var y = Math.max(10, (document.body.scrollHeight ||
document.documentElement.scrollHeight)/2-height*2/3);
var wnd = new mxWindow(title, content, x, y, width, height, false, true); //后两个布尔值代表最小化和可移动
wnd.setClosable(true);
// 窗口关闭后淡入背景
wnd.addListener(mxEvent.DESTROY, function(evt)
{
graph.setEnabled(true);
mxEffects.fadeOut(background, 50, true,
10, 30, true);
});
graph.setEnabled(false);
graph.tooltipHandler.hide();
wnd.setVisible(true);
};
// 添加边栏图标
function addSidebarIcon(doc,graph, sidebar, label, image)
{
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
var funct = function(graph, evt, cell, x, y)
{
var parent = graph.getDefaultParent();
var model = graph.getModel();
var v1 = null;
model.beginUpdate();
try
{
objv1=null;
iv1length=0;
ev1length=0;
// NOTE: For non-HTML labels the image must be displayed via the style
// rather than the label markup, so use 'image=' + image for the style.
// as follows: v1 = graph.insertVertex(parent, null, label,
// pt.x, pt.y, 120, 120, 'image=' + image);
//v1 = graph.insertVertex(parent, null, label, x, y, 120, 120);
if(label.label != "generateId" && label.label != "Data"){
var operator = doc.createElement(label.label);
operator.setAttribute('firstValue', '55');
operator.setAttribute('secondValue', '66');
operator.setAttribute('calc', label.calculate);
v1 = graph.insertVertex(parent, null, operator, x, y, 120, 90,'verticalLabelPosition=top;verticalAlign=bottom');
}else{
v1 = graph.insertVertex(parent, null, '<h3 style="margin:0px;">'+label.label+'</h3>', x, y, 120, 90,'verticalLabelPosition=top;verticalAlign=bottom');
}
v1.setConnectable(false);
// 预置折叠的大小
//v1.geometry.alternateBounds = new mxRectangle(0, 0, 120, 40);
/* graph.convertValueToString = function(cell)
{
return cell.value.tablename;
} */
graph.addListener(mxEvent.CLICK, function(sender, evt)
{
var e = evt.getProperty('event'); // mouse event
var cell = evt.getProperty('cell'); // cell may be null
if (cell != null)
{
if(cell.isVertex()&&cell.children){
objv1 = cell;
var iCount=0;
for ( var i in objv1.children) {
var style = this.getCellStyle(objv1.children[i]); //底层vertex开始执行处，只有接口图标的label的fontstyle为2，此时就返回空
var fontColor = style.fontColor;
if ('red'==fontColor){
iCount++;
continue;
}
}
iv1length = iCount;
ev1length = objv1.children.length/2-iCount;
$("#setDBButton").show();
//document.getElementById('textfield').value="";
document.getElementById('db').value="";
}else{
$("#setDBButton").hide();
}
//cell.target.value = cell.source.value
}else{
$("#setDBButton").hide();
}
evt.consume();
});
var imports=label.import;
var exports=label.export;
var importValue=imports.split(",");
var exportValue=exports.split(",");
var iscale=0.25;
var escale=0.25;
for ( var i in importValue) {
// 在不同位置添加对应图标
var iport = graph.insertVertex(v1, null, null, 0, iscale, 16, 16,
'port;image=./editors/images/redo.gif;align=right;imageAlign=right;spacingRight=18', true); //true代表几何图形是相对的，所以可以用0,0.25来表示坐标
iport.geometry.offset = new mxPoint(-6, -8); //将图片设置偏移，向左6px，向上8px
var ilabel = graph.insertVertex(v1, null, importValue[i], 0, iscale, 0, 0, 'fontColor=red', true);
ilabel.setConnectable(false);
ilabel.geometry.offset = new mxPoint(30, -2);
iscale += 0.25;
}
for ( var i in exportValue) {
// 在不同位置添加对应图标
var eport = graph.insertVertex(v1, null, null, 1, escale, 16, 16,
'port;image=./editors/images/overlays/flash.png;spacingLeft=18', true);
eport.geometry.offset = new mxPoint(-8, -8);
var elabel = graph.insertVertex(v1, null, exportValue[i], 1, escale, 0, 0, null, true);
elabel.setConnectable(false);
elabel.geometry.offset = new mxPoint(-30, -2);
escale += 0.25;
}
//objv1 = v1;
//iv1length = importValue.length;
//ev1length = exportValue.length;
}
finally
{
model.endUpdate();
}
graph.setSelectionCell(v1);
}
/* // 创建用来拖动的侧边栏图标
var liChild = document.createElement("li");
$(liChild).css({
'cursor' : 'pointer'
});
var img = document.createElement('img');
liChild.appendChild(img);
img.setAttribute('src', image);
img.style.width = '24px';
img.style.height = '24px';
img.title = 'Drag this to the diagram to create a new vertex';
$(img).after('<span>' + label.label + '</span>');
sidebar.appendChild(liChild); */
var liChild = null;
var domsArr = document.getElementById("treeDemo").querySelectorAll("li");
for( var i = 0, len = domsArr.length; i < len; i++){
if(domsArr[i].lastChild.lastChild.innerHTML==label.label){
liChild=domsArr[i];
break;
}
}
var dragElt = document.createElement('div');
dragElt.style.border = 'dashed black 1px';
dragElt.style.width = '120px';
dragElt.style.height = '90px';
// 创建的图像，它被用作拖动图标（预览）
//要拖动的dom元素，要拖置的graph区域，成功拖放后执行函数，（此处开始都为可选项）用于拖动预览的dom节点，光标与拖动预览水平偏移，垂直偏移，用于指定是否自动滚动，指定拖放预览元素是否跟graph区域同比例缩放偏移也是
var ds = mxUtils.makeDraggable(liChild, graph, funct, dragElt, 0, 0, true, true);
ds.setGuidesEnabled(true);
};
/** 后台赋值函数 **/
function setValue(){
for ( var i = 0; i < ev1length; i++) {
objv1.children[2*iv1length+2*i].value = $("#db").val();
}
toastr.success('导入数据成功!');
}
function exc(){
var edgecell = null;
var res=gra.getModel();
var objname = null;
var firstValue = null;
var secondValue = null;
var sourceValue = null;
for (var r in res.cells) {
if(res.isEdge(res.cells[r])){
edgecell=res.cells[r];
//edgecell.target.value = edgecell.source.value;
objname = edgecell.target.parent.value.nodeName;
for(var key in calculationMap){
if(objname == key){
firstValue = edgecell.target.parent.value.attributes.firstValue.nodeValue;
secondValue = edgecell.target.parent.value.attributes.secondValue.nodeValue;
sourceValue = edgecell.source.value;
edgecell.target.value = eval(sourceValue+calculationMap[key]+firstValue+"+"+secondValue);
break;
}
}
}
}
toastr.success('数据传递成功！');
mxUtils.setTextContent(hints, '');
mxUtils.writeln(hints, sourceValue+calculationMap[key]+firstValue+"+"+secondValue+"="+edgecell.target.value);
//document.getElementById("showDB").innerHTML = edgecell.target.value;
}
function change(par){
document.getElementById('textfield').value=par.value;
$.ajaxFileUpload
(
{
url: 'GetFileInfoServlet', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'fileField', //文件上传域的ID
success : function (data) //服务器成功响应处理函数
{
portValue=data;
},
error: function (data)//服务器响应失败处理函数
{
console.log(data);
}
}
);
return false;
}
// 配置样式
function configureStylesheet(graph)
{
var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; //默认的矩形
//style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
//style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5';
style[mxConstants.STYLE_FILLCOLOR] = '#F1D9E8';
style[mxConstants.STYLE_STROKECOLOR] = '#818181';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
style[mxConstants.STYLE_ROUNDED] = false; //是否是圆角，0或1也可
style[mxConstants.STYLE_OPACITY] = '80';
style[mxConstants.STYLE_FONTSIZE] = '12';
//style[mxConstants.STYLE_FONTSTYLE] = '800,5,6';
style[mxConstants.STYLE_FONTSTYLE] = 0;
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
graph.getStylesheet().putDefaultVertexStyle(style);
style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_FONTCOLOR] = '#774400';
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_PERIMETER_SPACING] = '6';
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_FONTSIZE] = '10';
style[mxConstants.STYLE_FONTSTYLE] = 2;
style[mxConstants.STYLE_IMAGE_WIDTH] = '16';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '16';
graph.getStylesheet().putCellStyle('port', style);
style = new Object();
style[mxConstants.STYLE_FONTSIZE] = '5';
graph.getStylesheet().putCellStyle('label', style);
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
style[mxConstants.STYLE_STROKEWIDTH] = '2';
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
};
var flag1=false;
var flag2=false;
function toggleIcon(){
if(!flag1){
$("#pageLeft").attr("style","display:none");
if(!flag2){
$("#pageRight").attr("style","width:75%");
}else{
$("#pageRight").attr("style","width:95%");
}
$("#angle").empty().append("<i class='fa fa-angle-double-right'></i>");
flag1=true;
}else{
$("#pageLeft").attr("style","display:block");
if(!flag2){
$("#pageRight").attr("style","width:60%");
}else{
$("#pageRight").attr("style","width:80%");
}
$("#angle").empty().append("<i class='fa fa-angle-double-left'></i>");
flag1=false;
}
}
function toggleIcon2(){
if(!flag2){
$("#pageFooter").attr("style","display:none");
if(!flag1){
$("#pageRight").attr("style","width:80%");
}else{
$("#pageRight").attr("style","width:95%");
}
$("#angle2").empty().append("<i class='fa fa-angle-double-left'></i>");
flag2=true;
}else{
$("#pageFooter").attr("style","display:block");
if(!flag1){
$("#pageRight").attr("style","width:60%");
}else{
$("#pageRight").attr("style","width:75%");
}
$("#angle2").empty().append("<i class='fa fa-angle-double-right'></i>");
flag2=false;
}
}
function showLog(){
$("#logInfo").fadeToggle("slow");
}
</script>
</html>
扫一扫
05-12
1160
1160
04-19
5211
5211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
