Добавление полос в повторитель FuelUx (сетка данных)

Поскольку Fuelux является расширением bootstrap, я сначала попытался добавить к таблице класс table-striped, указав таблицу как тег, а также попытался получить класс таблицы, то есть .table:

$('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 в тег таблицы. Есть ли способ настроить таргетинг на теги, созданные js?


twitter-bootstrap fuelux
person BattlFrog    schedule 11.06.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я знаю, что это старый вопрос, но если вы все еще ищете ответ на него, вот что я делаю. В вызове инициализации повторителя вы можете указать функцию, которая будет запускаться, когда повторитель отображает свои строки. Вы упомянули функцию рендеринга столбца выше (list_columnRendered). Если вы хотите чередовать таблицу, как это делает загрузчик, вам нужно подключиться к событию 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();
    }
person Mike Devenney    schedule 04.02.2016
comment
Обратите внимание, что вы можете изменить цвет, который вы используете для выделения строк. Я использовал тот же цвет, который использует загрузчик, и это, в свою очередь, тот же цвет, который повторитель использует для выделения отсортированной строки (при применении сортировки). Ничего страшного, но вам на заметку. - person Mike Devenney; 04.02.2016

arrow_upward
0
arrow_downward

Это будет работать

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

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

Просто поместите его в источник данных функции и поместите в конце после обратного вызова (источник данных). Таким образом, ваша таблица инициализируется.

person MattB    schedule 25.05.2016