将内联php中的变量值传递给jquery函数

时间:2016-02-18 12:38:32

标签: javascript php jquery html gantt-chart

我有加载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代码,但我不熟悉网页编程。

0 个答案:

没有答案