0

我尝试使用 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 重建这些数据。

一些提示？;)

4

3 回答 3

0

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

于 2011-11-14T04:40:27.647 回答
0

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

$(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" }
    ]
}]
于 2011-12-15T08:21:45.130 回答
0 
    $(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
        });


    });

模型

public class GanttModel
{
    public int id { get; set; }
    public string name { get; set; }
    public List<GanttProperties> series { get; set; }
}


public class GanttProperties
{
    public string name { get; set; }
    public DateTime start { get; set; }
    public DateTime end { get; set; }
    public string color { get; set; }

}

动作方法

public ActionResult GetData()
{
    List<GanttProperties> series;
    List<GanttModel> gantdata = new List<GanttModel>
    {

        new GanttModel {id=  1,name="Brick Work", series=new List<GanttProperties> { new GanttProperties {name = "Scope work" ,start= DateTime.Now,end =DateTime.Now.AddDays(20),color = "green"} } },
        new GanttModel {id=  2,name="Common Work", series=new List<GanttProperties> { new GanttProperties {name = "No Of days to Complete 6th Slab", start= DateTime.Now,end =DateTime.Now.AddDays(20),color = "green"} } }

    };

    return Json(gantdata, JsonRequestBehavior.AllowGet);
}
于 2020-05-29T04:41:22.703 回答