1

私がやろうとしていること: jquery.ganttプラグインを インストールし、ドキュメントに記載されている基本的な例を実行します。

失敗 の原因: JavaScript は何も実行せず、ターゲット DOM は変更されません。

私がしたこと: css ファイルstyle.cssと jsjquery.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 の実際のコードを確認したいだけです。この問題をデバッグする方法についてのアドバイスも大歓迎です。

4

1 に答える 1

1

わかりました私はそれを機能させることができました。

デフォルトの css では、ターゲット DOM に class='gantt' を配置する必要があり、私が行った '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>
于 2012-08-25T13:38:39.700 に答える