Q

如何渲染YUI數據表？

2012-06-10 54 views 0 likes

0

繼the documentation of the YUI DataTable control我已經推斷出下面的代碼：如何渲染YUI數據表？

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

，但不會改變控件的外觀。

2012-06-10 Ian Boyd

A

回答

1

將< script> s移動到< body>的底部，或至少在包含DataTable的< div>之後。這將避免在設置DOM之前加載腳本可能的競爭狀態。（'＃example'）告訴DataTable渲染成一個id爲'example'的元素。你包含的標記樣本有一個div，其中類爲'example'，然後兩個div帶有id '簡單'和'標籤'。您需要確保您使用類yui3-skin-sam在父元素內進行渲染。如果您告訴YUI小部件呈現爲無法找到的元素，則會回退到將其呈現在<正文中。您可以在幾個方面解決這個問題：

類添加到< body>標籤，而不是一個< DIV>（不是一個壞主意，但你還是應該解決的渲染目標選擇）
使用渲染器（？）匹配頁面元素（如render（'。example'），render（'＃simple'）或render（'＃labels'））的目標選擇器。

在任何情況下，請確保您的渲染目標是帶class =「YUI3皮膚-SAM」的元素中

2012-06-11 06:54:12 Luke

+0

我試圖做出我認爲從筆記推斷的變化。它沒有工作。你可以用你提出的改變發佈代碼嗎？ –

+0

http://jsbin.com/3/ebadiq/1/edit?html,live – Luke

2

在body標籤添加class="yui3-skin-sam"，表CSS寫入對應於這個類。

2013-07-30 14:38:54 user2634563

相關問題