Question

我正在尝试做什么： 安装jquery.gantt插件并运行docs中给出的基本示例。

失败的方式： 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>

jquery.gantt插件没有做任何事情

1 个答案: