我有加载jQuery.Gantt的html文件。在html里面我把嵌套的php从数据库中获取必要的数据来填充网格。根据规范,数据与json合成。
我的问题是如何将数组传递给$ function()到属性源?
以下是代码:
<html lang="en-au">
<head>
<title>jQuery.Gantt</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://taitems.github.com/UX-Lab/core/css/prettify.css" />
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 0 0 50px 0;
}
.contain {
width: 800px;
margin: 0 auto;
}
h1 {
margin: 40px 0 20px 0;
}
h2 {
font-size: 1.5em;
padding-bottom: 3px;
border-bottom: 1px solid #DDD;
margin-top: 50px;
margin-bottom: 25px;
}
table th:first-child {
width: 150px;
}
</style>
</head>
<body>
<div class="contain">
<h1>
<small>Planning</small>
</h1>
<div class="gantt"></div>
</div>
<?php
include 'config.php';
mysql_query('SET CHARACTER SET utf8');
$sql_query = "SELECT Code, OrderNumber, DeliveryDate, QTY, Progress FROM production WHERE IDCustomer = 8 and Code = '5101452 SMD E PTH';";
$r=mysql_query($sql_query, $con);
$outp = "[";
while($rs=mysql_fetch_array($r))
{
if ($outp != "[") {$outp .= ",";}
$outp .= '{"name":"' . $rs["Code"] . '",';
$outp .= '"desc":"' . $rs["OrderNumber"] . '",';
$outp .= '"values": ';
$outp .= '[{"from": "' .$rs["DeliveryDate"] . '", ';
$outp .= '"to": "' .$rs["DeliveryDate"] . '",';
$outp .= '"label": "' .$rs["QTY"] . '",';
$outp .= '"customClass": "' .$rs["Progress"] .'"}]}';
}
$outp .="]";
mysql_close($con);
?>
</body>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://taitems.github.com/UX-Lab/core/js/prettify.js"></script>
<script>
$(function() {
"use strict";
$(".gantt").gantt({
source: "src/mydata1.json",
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "days",
waitText: "Please wait...",
itemsPerPage: 50,
onItemClick: function(data) {
alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
$(".gantt").popover({
selector: ".bar",
title: "I'm a popover",
content: "And I'm the content of said popover.",
trigger: "hover"
});
});
</script>
</html>
还是有更好的方法吗?实际上我想分割HTML和PHP代码,但我不熟悉网页编程。