Question

因为fuelux是bootstrap的扩展，我首先尝试通过将表作为标记添加到表中来添加'table-striped'类，我还尝试抓取表的类，即.table：< / p>

$('table').addClass('table-striped');

既没有奏效，所以我尝试了fuelux使用的完整路径：

$('.fuelux .repeater[data-viewtype="list"] .repeater-canvas .repeater-list table').addClass('table-striped');

没有运气。它自己的表是由fuelux脚本动态创建的，所以我不确定如何引用它。

查看文档，看起来list_columnRendered（）函数可能会有所帮助，但我不确定该引用什么。我想我可以使用list_columnRendered（helpers.item）来定位表格单元格（td），但我认为这会添加内联样式，我希望尽可能避免使用。

最好我将'table-striped'类添加到table标签中。有没有办法定位js创建的标签？

Answer 1

我知道这是一个老问题，但如果你还在四处寻找答案，那就是我的所作所为。在转发器的初始化调用中，您可以指定在转发器呈现其行时要运行的函数。您提到了上面的列呈现函数（list_columnRendered）。如果你想像bootstrap一样对表进行条带化，你想要挂钩到list_rowRendered事件。

为此，请将以下行添加到转发器的初始化中：

var repeaterReports = $("#reportList");    
repeaterReports.repeater({
            dataSource: getReportsData,
            list_noItemsHTML: "There are currently no reports to display.  If you performed a search you can clear the search using the x in the search box.",
            list_columnRendered: customColumnRendererReports,
            list_rowRendered: customRowRendererReports, // <--- you want this line.
            preserveDataSourceOptions: true
        });

然后customRowRenderedReports函数看起来像这样：

 function customRowRendererReports(helpers, callback) {
        // add background color to every other row
        if (helpers.item[0].rowIndex % 2 == 0) {
            helpers.item.css('background-color', '#f9f9f9');
        }

        callback();
    }

Answer 2

这将有效

function dataSource (options, callback) { 
     /* add some data code here...*/   
     ...
     ...

     callback(dataSource);
     $('table').addClass('table-striped'); 
}

将其嵌入到函数datasouce中并放在回调后的末尾（dataSource）。这样你的表就被初始化了。

向FuelUx中继器添加条纹（数据网格）

2 个答案: