1

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

我试过的：

定义我自己的模板：

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

没用，请多指教。

4

1 回答 1

2

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

只需在他们的库（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');
    }

});

请注意，我正在更改列的text属性，将图标与当前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.

于 2017-02-26T08:32:26.700 回答