JQuery GanttChart - Apply Data

问题

I tried to use the gantview jquery plugin (https://github.com/thegrubbsian/jquery.ganttView)

So the needed data is like:

    {
        id: 1, name: "Feature 1", series: [
            { name: "Planned", start: new Date(2010,00,01), end: new Date(2010,00,03) },
            { name: "Actual", start: new Date(2010,00,02), end: new Date(2010,00,05), color: "#f0f0f0" }
        ]
    }, 
    {
        id: 2, name: "Feature 2", series: [
            { name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
            { name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
            { name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#e0e0e0" }
        ]
    }, 
    {
        id: 3, name: "Feature 3", series: [
            { name: "Planned", start: new Date(2010,00,11), end: new Date(2010,01,03) },
            { name: "Actual", start: new Date(2010,00,15), end: new Date(2010,01,03), color: "#f0f0f0" }
        ]
    }, 
    {
        id: 4, name: "Feature 4", series: [
            { name: "Planned", start: new Date(2010,01,01), end: new Date(2010,01,03) },
            { name: "Actual", start: new Date(2010,01,01), end: new Date(2010,01,05), color: "#f0f0f0" }
        ]
    }

Ok I think its JSON :-) So I built it in php, my funcs output is:

SERIES DATA
Array
(
    [name] => Krank
    [start] => 1317420000
    [end] => 1320102000
)
DATA
Array
(
    [id] => 1
    [name] => 15
    [series] => Array
        (
            [name] => Krank
            [start] => 1317420000
            [end] => 1320102000
        )

)
JSON
{"id":1,"name":15,"series":{"name":"Krank","start":1317420000,"end":1320102000}}

Of course I submit only the json part to the plugin ;)

I built an array and encode it to json.

So with this data the plugin doesn't work. I have no idea how to rebuild this data with php.

some hints? ;)

回答1:

here is some workaround: http://dhanushkaat.blogspot.com/2011/01/jquery-gantt-chart.html

回答2:

After reading the source code of jquery.ganttView and some trial and error, I found that the start and end accept format in Y-m-d and m-d-Y when the data is supplied by an external url (using dataUrl instead of data):

$(function () {
        $("#ganttChart").ganttView({ 
            dataUrl: 'data.json',
            slideWidth: 900,
            behavior: {
                onClick: function (data) { 
                    var msg = "You clicked on an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                    $("#eventMessage").text(msg);
                },
                onResize: function (data) { 
                    var msg = "You resized an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                    $("#eventMessage").text(msg);
                },
                onDrag: function (data) { 
                    var msg = "You dragged an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                    $("#eventMessage").text(msg);
                }
            }
        });

    });

An example of data:

[
{
    "id": "1", "name": "Feature 1", "series": [
        { "name": "Planned", "start": "2010-01-01", "end": "2010-01-03" },
        { "name": "Actual", "start": "2010-01-02", "end": "2010-01-05", "color": "#f0f0f0" }
    ]
}, 
{
    "id": "2", "name": "Feature 2", "series": [
        { "name": "Planned", "start": "2010-01-05", "end": "2010-01-20" },
        { "name": "Actual", "start": "2010-01-06", "end": "2010-01-17", "color": "#f0f0f0" },
        { "name": "Projected", "start": "2010-01-06", "end": "2010-01-17", "color": "#e0e0e0" }
    ]
}]

来源：https://stackoverflow.com/questions/7370988/jquery-ganttchart-apply-data

标签

javascript

php

jquery

json

gantt-chart