Question

如果符合条件，我想在标题单元格中添加一个图标。我知道在文档中它提到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;
};

必须在第974行定义var Grid = function(element, options)后放置。

然后，您可以在加载网格后调用此方法：

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，您将结束有一个像 Column Name这样的列文本。

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

1 个答案: