0

YUI DataTable コントロールのドキュメントに従って、次のコードを推測しました。

<!DOCTYPE HTML>
<HTML>
<HEAD>
    <SCRIPT type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></SCRIPT>
    <SCRIPT type="text/javascript">
        // Create a new YUI instance and populate it with the required modules.
        YUI().use('datatable', function (Y) {
            // Columns must match data object property names
            var data = [
                { id: "ga-3475", name: "gadget",   price: "$6.99", cost: "$5.99" },
                { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
                { id: "wi-0650", name: "widget",   price: "$4.25", cost: "$3.75" }
            ];

            var table = new Y.DataTable({
                columns: ["id", "name", "price"],
                data: data,

                // Optionally configure your table with a caption
                caption: "My first DataTable!",

                // and/or a summary (table attribute)
                summary: "Example DataTable showing basic instantiation configuration"
            });
            table.render("#example");
        });
    </SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

侮辱的なことは、ドキュメントが言うことです:

このコードは、次の表を生成します。

ここに画像の説明を入力

ただし、このコードは次の表を生成します。

ここに画像の説明を入力

明らかに、YUI データ テーブルをレンダリングする方法について、かなり基本的なことが欠けています。YUI データ テーブルをレンダリングする正しい方法は何ですか?

Q. YUI データテーブルをレンダリングする方法は?


別のページでは、 a を含め、 myを空から次のよう<div>に変更することが言及されています。<BODY>

<BODY>
    <div class="example yui3-skin-sam">
        <div id="simple"></div>

        <div id="labels"></div>
    </div>
</BODY>

ただし、コントロールの外観は変更しません。

4

2 に答える 2

2

bodyタグに追加class="yui3-skin-sam"すると、このクラスに対応するテーブルcssが書かれます。

于 2013-07-30T14:38:54.873 に答える
1

<script>を<body>の下部に移動するか、少なくともDataTableを含む<div>の後に移動します。これにより、DOMがセットアップされる前にスクリプトロードされる可能性のある競合状態が回避されます。

render('#example')は、idが'example'の要素にレンダリングするようにDataTableに指示しています。含めたマークアップサンプルには、クラスが'example'のdivがあり、次にidが'simple'と'labelsの2つのdivがあります。 '。クラスyui3-skin-samの親要素内でレンダリングしていることを確認する必要があります。YUIウィジェットに、見つからない要素にレンダリングするように指示すると、<body>内でのレンダリングにフォールバックします。これはいくつかの方法で修正できます。

  • <div>の代わりに<body>タグにクラスを追加します(悪い考えではありませんが、レンダリングターゲットセレクターを修正する必要があります)
  • render('。example')、render('#simple')、render('#labels')など、ページ上の要素に一致するrender(? )ターゲットセレクターを使用します。

いずれの場合も、レンダリングターゲットがclass="yui3-skin-sam"の要素内にあることを確認してください

于 2012-06-11T06:54:12.243 に答える