javascript - jquery.gantt 插件不执行任何操作

Question

我想做的事情:安装jquery.gantt插件并运行文档中给出的基本示例。

它是如何失败的:JavaScript 不执行任何操作，目标 DOM 保持不变。

我做了什么:我检查了 css 文件 style.css 和 js jquery.fn.gantt.js 是否已安装。我检查了图像是否已安装。我查看了文档的来源。

一些代码:我从文档中获取了它作为示例，但从未设法使其工作。

    <script type="text/javascript">
<!--
        $(".ganttdiv").gantt({
            source:  [{
                name: "Example",
                desc: "Lorem ipsum dolor sit amet.",
                values: [ {
                    to: "/Date(1328832000000)/",
                    from: "/Date(1333411200000)/",
                    desc: "Something",
                    label: "Example Value",
                    customClass: "ganttRed",
                    dataObj: foo.bar[i]
                }]
            }],
            scale: "weeks",
            minScale: "weeks",
            maxScale: "months",
            onItemClick: function(data) {
                alert("Item clicked - show some details");
            },
            onAddClick: function(dt, rowId) {
                alert("Empty space clicked - add an item!");
            }
        });


//-->
</script>
<div class="ganttdiv"></div>

我的问题:

我想了解我做错了什么，或者只是想看看 Jquery.gantt 的工作示例的代码。任何有关如何调试此问题的建议也将不胜感激。

Answer 1

好的，我成功了。

默认的 CSS 强制您将 class='gantt' 放在目标 DOM 上，而不是像我那样放置“ganttdiv”。

这是一个有效的示例，我希望它对某人有用。

<script type="text/javascript">
<!--
    $(  function(){$(".gantt").gantt({
            source:  [{
                name: "Example",
                desc: "Lorem ipsum dolor sit amet.",
                values: [ {
                    to: "/Date(1376954000000)/",
                    from: "/Date(1375854000000)/",
                    desc: "Something",
                    label: "Example Value",
                    customClass: "ganttRed",
                }]
            }],scale: "weeks",
            minScale: "weeks",
            maxScale: "months",
            navigate:"scroll",

            onItemClick: function(data) {
                alert("Item clicked - show some details");
            },
            onAddClick: function(dt, rowId) {
                alert("Empty space clicked - add an item!");
            }
        });
});

//-->
</script>
<div class="gantt"></div>