Question

关注the documentation of the YUI DataTable control我推断出以下代码：

<!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>

侮辱性的是文档说：

此代码生成此表：

除了此代码生成此表：

enter image description here

显然，我遗漏了一些关于如何渲染YUI数据表的基本信息。呈现YUI数据表的正确方法是什么？

问。如何呈现YUI数据表？

Another page提到包括<div>，将我的<BODY>从空更改为：

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

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

但不会改变控件的外观。

Answer 1

在body标签中添加class="yui3-skin-sam"，写入与此类对应的表css。

Answer 2

将＆lt; script＆gt;移动到＆lt; body＆gt;的底部，或者至少在＆lt; div＆gt;之后移动那将包含DataTable。这将避免在设置DOM之前加载脚本的竞争条件。

render（'＃example'）告诉DataTable呈现为id为'example'的元素你包含的标记样本有一个div，其中 class 是'example'，然后两个div与ids'简单'和'标签'。您需要确保使用类yui3-skin-sam在父元素内进行渲染。如果你告诉YUI小部件渲染到它找不到的元素，它会回退到在＆lt; body＆gt;中渲染它。您可以通过以下几种方式解决此问题：

将该类添加到＆lt; body＆gt;标记而不是＆lt; div＆gt; （这不是一个坏主意，但您仍应修复渲染目标选择器）
使用与页面上的元素匹配的渲染（？）目标选择器，例如render（'。example'），render（'＃simple'）或render（'＃labels） “）。

在任何情况下，请确保渲染目标位于class =“yui3-skin-sam”的元素内

如何渲染YUI数据表？

2 个答案: