2017-02-05 8 views
1

Я хочу добавить значок в ячейку заголовка, если выполнено условие. Я знаю, что в документации упоминается, что dynamic placholders - вещь, но она не уточняет, как добавить свой собственный.jQuery Bootgrid Условная иконка в ячейке заголовка


Что я пробовал:

Определение моего собственного шаблона:

templates: { 
    headerCell: '<th data-column-id="{{ctx.column.id}}">{{ctx.column.text}}{{ctx.column.myCustomIcon}}</th>', 
} 

затем в форматтеров, добавив пользовательское поле.

formatters: { 
    myCustomField: function(column, row){ 

    column.myCustomIcon = ""; 

    if (item[column.id] == 0) { 
     return ""; 
    } 

    column.myCustomIcon = '<i class="fa fa-shield"></i>'; 
    } 
} 

Не работает, некоторые рекомендации будут оценены.

ответ

1

Мне удалось сделать это без использования шаблона, а также создать новый метод в своем прототипе.

Просто добавьте этот метод в своей библиотеке (jquery.bootgrid.js):

Grid.prototype.recreateTableHeader = function() { 
    renderTableHeader.call(this); 
    return this; 
}; 

Это должен быть помещен после того, как они определяют var Grid = function(element, options) вокруг линии 974.

Затем, вы можете позвоните по этому методу после загрузки сетки:

var columnNameChanged = false; 

var grid = $('#my-grid').bootgrid(/* your options here */); 

grid.on("loaded.rs.jquery.bootgrid", function() { 

    if (!columnNameChanged) { 

     columnNameChanged = true; 
     var columns = grid.bootgrid('getColumnSettings'); 
     var column = columns[1]; 
     column.text = '<i class="fa fa-shield"></i> ' + column.text; 

     grid.bootgrid('recreateTableHeader'); 
    } 

}); 

Обратите внимание, что я изменение значения в столбце, соединяя значок с текущим column.text (в котором содержится текст, который вы помещаете в свой HTML). Вы можете изменить это внутри вашего форматирования или внутри этого события loaded, например, моего образца, но так как ваш форматировщик вызывается один раз для каждой строки, и я добавляю column.text после разметки значка, вы получите текст столбца, такой как <i class="fa fa-shield"></i><i class="fa fa-shield"></i><i class="fa fa-shield"></i> Column Name.