JQuery GanttChart-应用数据

Question

我尝试使用gantview jQuery插件（https://github.com/thegrubbsian/jquery.ganttView）

因此所需数据如下：

    {
        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" }
        ]
    }

好吧，我认为它的JSON :-)所以我用php构建了它，我的funcs输出是：

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}}

当然，我只将json部分提交给插件;）

我建立了一个数组并将其编码为json。

因此，使用此数据，插件将无法正常工作。我不知道如何用php重建此数据。

一些提示？ ;）

Answer 1

这里有一些解决方法：http://dhanushkaat.blogspot.com/2011/01/jquery-gantt-chart.html

Answer 2

阅读了jquery.ganttView的源代码和一些试验和错误之后，我发现当数据由外部url提供时（使用dataUrl而不是data），起始和结束接受格式为Y-m-d和m-d-Y：

$(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);
                }
            }
        });

    });

数据示例：

[
{
    "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" }
    ]
}]

Answer 3

    $(function () {
        var ganttData = [];        
        function onDataReceived(Data) {
            $.each(Data, function (i, j) {
                var obj = { id: j.id,name:j.name,series:[] }                   
                $.each(j.series, function (i1, j1) {                   
                    obj['series'].push({ name: j1.name, start: new Date(2010, 00, 05), end: new Date(2010, 00, 20) });
              });
                ganttData.push(obj)        });

             $("#ganttChart").ganttView({
                data: ganttData,
                slideWidth: 900,
                behavior: {
                    onClick: function (data) {

                    },
                    onResize: function (data) {

                    },
                    onDrag: function (data) {


                    }
                }
            });       

        }
        var dataUrl = "/Engineering/GetData";
        $.ajax({
            type: "POST",
            url: dataUrl,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: onDataReceived
        });


    });`enter code here`