使HTML_PARSER工作在小部件DataTable

问题描述：

所以我想解析一个HTML表格到YUI 3 DataTable小部件，修改小部件HTML_PARSER对象。使HTML_PARSER工作在小部件DataTable

HTML

<div id="table"> 
<table> 
<thead> 
<tr> 
    <th>Tipo</th> 
    <th>Codigo</th> 
    <th>Descripcion</th> 
    <th>Impuesto para la Venta</th> 
    <th>Precio</th> 
    <th>Precio con IVA</th> 
    <th>Cantidad</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Producto</td> 
    <td>1</td> 
    <td>7</td> 
    <td>12</td> 
    <td>7.00</td> 
    <td></td> 
    <td>7</td> 
</tr> 
</tbody> 
</table> 
</div>

的Javascript

Y.DataTable.HTML_PARSER = { 
    columns:function(srcNode) { 
     var cols = []; 

     srcNode.all("th").each(function(th){ 
      var col = { 
       // sets column "key" to contents of TH with spaces removed 
       key: th.getHTML().replace(/\s+/g, '').toLowerCase(), 
       label: th.getHTML()     
      }; 
      cols.push(col); 
     }); 
     return cols; 
    }, 
    data:function(srcNode) { 
     var data = []; 
     srcNode.all("tbody tr").each(function(tr){ 
      var col = {}; 
      tr.all("td").each(function(td_item, td_index){ 
       // extracts the "key" name from the column based on it's TD index 
       var dataKey = Y.DataTable.HTML_PARSER.cols[td_index].key,  
        data = td_item.getHTML();    
       // sets "key:data" for this TD element ...  
       col[dataKey] = data;  
      }); 
      data.push(col); 
     }); 
     return data; 
    } 
}; 

new Y.DataTable({srcNode:'#table'}).render('#table');

一定有什么问题。也许我误读documentation。需要一些帮助。 PLAYGROUND

答

当您获取dataKey时，您正在调用方法cols而不是columns。顺便说一下，你不应该为每个细胞调用它，它会太慢。在将数据单元循环并将其保存在局部变量中之前，将列键获取到数组中。除此之外，它看起来不错，尽管我没有做过这么多年，可能会忘记一些东西。

Suerte

使HTML_PARSER工作在小部件DataTable

相关推荐