我正在使用JS-Graph.IT创建流程图,并希望在选择下拉选项时,使用更改的流程图版本加载div。在加载AJAX内容之前,流程图工作并显示带有从一个框指向另一个框的箭头的框。加载AJAX内容后,似乎无法生成连接器。
我发现这是因为在使用相同的画布ID之前需要清除画布。 SourceForge我尝试按照说明将delCanvas函数复制到JS文件中,并调用delCanvas函数并重新初始化HTML页面标题中的页面对象:
<script type="text/javascript">
jQuery(document).ready(function() {
JSGraphIt.initPageObjects();
$("body").delegate("#button1", "click", function() {
delCanvas('#mainCanvas');
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside17.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
JSGraphIt.initPageObjects();
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
}
});
});
});
</script>
提前感谢您的帮助!
HTML页面:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <!-- Jquery for Slide Toggle -->
<script type="text/javascript" src="../js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="../sf-homepage.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
}
</style>
<script type="text/javascript">
function onLoad()
{
JSGraphIt.initPageObjects();
}
jQuery(document).ready(function() {
$(".block").bind('click', $.proxy(function(event) {
var input = $(event.target).attr('id');
var lines = input.split('_');
var button = lines[0];
$.ajax({ // ajax call starts
url: 'srvrside.php', // JQuery loads serverside.php
data: 'button=' + button, // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#content').html(''); // Clear #content div
$('#content').append(data);
}
});
return false; // keeps the page from not refreshing
}, this));
$("#button1").bind('click', $.proxy(function(event) {
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside15.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
JSGraphIt.initPageObjects();
}
});
return false; // keeps the page from not refreshing
}, this));
});
</script>
</head>
<body onload="onLoad();">
<select id="combo">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input id="button1" type="button" value="Click!" />
<div id="mainCanvas" class="canvas" style="float: left; background: #F8F8F8; width: 100%; height: 60%; border-top: #ccc 1px solid !important; border-bottom: #ccc 1px solid !important; margin: 0 !important; border-left: 0; border-right: 0; padding: 0 !important;">
<?php
***database connection details***
while($row = mysqli_fetch_array($result))
{
echo '<div id="'.$row['id'].'_block" class="block" style="background: red;';
echo ' !important; left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
echo '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
echo $row['name'];
echo '</div>';
}
// Creating connectors
$result = mysqli_query($con,"SELECT * FROM dependencies");
while($row = mysqli_fetch_array($result))
{
echo '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
echo 'down_start">';
}
else {
echo 'right_start">';
}
echo '<img class="connector-end" src="arrow.gif">';
echo '<label class="middle-label">'.$row['desc'].'</label>';
echo '</div>';
}
// Closing database connection
mysqli_close($con);
?>
</div>
</body>
</html>
服务器端PHP:
<?php
// Get value of clicked button
$button = $_GET['button2'];
$all = '';
***Database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div id="'.$row['id'].'_block" class="block" style="border: 3px solid #000; background: red;';
$all .= 'left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
$all .= '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
$all .= $row['name'];
$all .= '</div>';
}
***database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
$all .= 'down_start">';
}
else {
$all .= 'right_start">';
}
$all .= '<img class="connector-end" src="arrow.gif">';
$all .= '<label class="middle-label">'.$row['desc'].'</label>';
$all .= '</div>';
}
// Closing database connection
mysqli_close($con);
print json_encode($all);
?>