使HTML_PARSER在小部件DataTable中工作

时间:2013-07-17 18:34:42

标签: javascript yui yui-datatable

所以我试图将一个html表解析为YUI 3 DataTable小部件,修改小部件HTML_PARSER对象。

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

1 个答案:

答案 0 :(得分:0)

当你获得dataKey时,你正在调用方法cols而不是columns。 顺便说一句,你不应该为每个单元格调用它,它会太慢。在循环数据单元格之前将列密钥放入数组中,并将它们保存在局部变量中。 除此之外,它看起来不错,虽然我已经很久没做过,可能会忘记一些事情。

Suerte