jQuery Bootgrid-bedingte Symbol in Header-Zelle

Question

Ich möchte ein Symbol zur Header-Zelle hinzufügen, wenn eine Bedingung erfüllt ist. Ich weiß, dass in der Dokumentation erwähnt, dass dynamic placholders eine Sache sind, aber es ist nicht ausführlich, wie Sie Ihre eigenen hinzufügen.

---

Was ich versucht habe:

mein eigenes Template definieren:

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

dann in den Formatierer, das benutzerdefinierte Feld hinzufügen.

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

    column.myCustomIcon = ""; 

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

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

Funktioniert nicht, einige Anleitung würde geschätzt werden.

Answer 1

Ich schaffte es, dies zu tun, ohne Vorlage zu verwenden, und eine neue Methode in ihrem Prototyp zu erstellen.

Fügen Sie einfach diese Methode in ihrer Bibliothek (jquery.bootgrid.js):

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

Diese platziert werden müssen, nachdem sie var Grid = function(element, options) um die Linie 974.

Dann definieren, können Sie Rufen Sie diese Methode nach dem Laden des Rasters auf:

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'); 
    } 

}); 

Beachten Sie, dass ich bin Ändern der Text Eigenschaft der Spalte, Verketten des Symbols mit der aktuellen column.text (die den Text enthält, den Sie in Ihren HTML-Code einfügen). Sie können dies in Ihrem Formatierer oder in diesem loaded Ereignis wie meine Probe ändern, aber da Ihr Formatierer einmal für jede Reihe angerufen wird und ich die column.text nach dem Symbol Markup anfüge, würden Sie am Ende einen Spaltentext wie <i class="fa fa-shield"></i><i class="fa fa-shield"></i><i class="fa fa-shield"></i> Column Name haben.