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 数据表的正确方法是什么？

问：如何渲染 YUI 数据表？

另一个页面提到包括 a <div>，将我<BODY>的从空更改为：

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

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

但不会改变控件的外观。

4

2 回答 2

2

添加class="yui3-skin-sam"body标签，table css写对应这个类。

于 2013-07-30T14:38:54.873 回答
1

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

render('#example') 告诉 DataTable 渲染到一个 id 为 'example' 的元素您包含的标记示例有一个 div类为 'example'，然后是两个 id 为 'simple' 和 'labels '。您需要确保在 yui3-skin-sam 类的父元素内进行渲染。如果您告诉 YUI 小部件渲染到它找不到的元素中，它会退回到在 <body> 内渲染它。您可以通过以下几种方式解决此问题：

  • 将类添加到 <body> 标签而不是 <div> （不是一个坏主意，但您仍然应该修复渲染目标选择器）
  • 使用与页面上的元素匹配的 render( ? ) 目标选择器，例如 render('.example')、render('#simple') 或 render('#labels')。

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

于 2012-06-11T06:54:12.243 回答