jQuery Header 单元格中的 Bootgrid 条件图标

Question

如果满足条件，我想在 header 单元格中添加一个图标。我知道在文档中它提到 dynamic placholders 是一回事，但它没有详细说明如何添加你自己的。

我试过的：

定义我自己的模板：

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

不起作用，希望能提供一些指导。

Answer 1

我设法在不使用模板的情况下做到了这一点，并在他们的原型中创建了一个新方法。

只需在他们的库中添加此方法 (jquery.bootgrid.js):

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

This must be placed after they define var Grid = function(element, options) around line 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');
    }

});

请注意，我正在更改列的 text 属性，将图标与当前的 column.text 连接起来（其中包含您在HTML)。您可以像我的示例一样在您的格式化程序或此 loaded 事件中更改它，但由于您的格式化程序为每一行调用一次并且我在图标标记之后附加 column.text，您将结束有像  Column Name.

这样的列文本

jQuery Header 单元格中的 Bootgrid 条件图标

jQuery Bootgrid Conditional Icon in Header Cell

jquery-bootgrid