是否可以在DevExpress dxDataGrid列标题中放入html（例如，引导图标）？

Question

我有一个dxDataGrid，我想在“标题”列标题中放入一个Bootstrap图标。

普通的图标引导HTML如下所示：

<i class="glyphicon glyphicon-gbp"></i>

为简单起见，dxDataGrid的代码直接来自DevExpress dxDataGrid教程：

$("#gridContainer").dxDataGrid({
    dataSource: books,
    columns: [
        { dataField: 'author', width: 125 },
        'title',
        { dataField: 'year', width: 60 },
        { dataField: 'genre', visible: false },
        { dataField: 'price', width: 100, format: 'currency', precision: 2 },
        { dataField: 'length', width: 65 },
        { dataField: 'format', width: 90 }
    ],
    columnChooser: { enabled: true },
    allowColumnReordering: true
});

因此，我想在价格列的“标题”字段中添加“£”字形图标，

{dataField: 'price', caption: '<i class=glyphicon glyphicon-gbp></i>', width: 100, format: 'currency', precision: 2 },

但datagrid仅以字符串格式显示html。

有谁知道我如何输入/格式化HTML以使其呈现？

Answer 1

我假设您的网页正在使用UTF-8编码。 如果是这样，则无需对磅符号进行HTML编码。 只需在标题字符串中使用实际字符（无需转义或编码）：

注：我加了假数据的dataSource ，以使其更容易调试作为一个独立的片断

<script>
    $("#gridContainer2").dxDataGrid({
        dataSource: [
            {'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'},
            {'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'},
            {'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'}
        ],
        columns: [
            { dataField: 'author', width: 125 },
            'title',
            { dataField: 'year', width: 60 },
            { dataField: 'genre', visible: false },
            { dataField: 'price', caption: 'Price in £', width: 100, format: 'currency', precision: 2 },
            { dataField: 'length', width: 65 },
            { dataField: 'format', width: 90 }
        ],
        columnChooser: { enabled: true },
        allowColumnReordering: true
    });
</script>

注意，GBP符号作为Unicode字符嵌入在标题中。 这样做的好处是，它允许网格控制字符的大小，就好像它是字体的一部分一样。 缺点是您选择的字体必须支持您正在使用的字符，否则您将得到意想不到的结果。

例：

这是您可以参考的Unicode字符表。 要在标题中使用这些字符中的任何字符（请参见上文），请单击网格中的字符，然后单击“复制到剪贴板”按钮。 然后，只需将字符粘贴到您的字符串中即可。

jQuery方法

如果这不是您要查找的内容，则可以使用客户端jQuery构建glyphicon，并在网格“重新绘制”时将其附加到单元头。

datagrid中的每个标题单元格都是“ .dx-header-row”的子级，因此您可以轻松地在其上设置CSS类，并使用jQuery与它们一起使用。

这是一个为价格的列定义添加cssClass的示例：

$("#gridContainer2").dxDataGrid({
    dataSource: [
        {'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'},
        {'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'},
        {'author':'fred','title':'the book','year':2016,'genre':'sci-fi','price':25.00,'length':'150 pages',format:'hardcover'}
    ],
    columns: [
        { dataField: 'author', width: 125 },
        'title',
        { dataField: 'year', width: 60 },
        { dataField: 'genre', visible: false },
        { dataField: 'price', caption: 'Price in ', cssClass: 'currencySymbol', width: 100, format: 'currency', precision: 2 },
        { dataField: 'length', width: 65 },
        { dataField: 'format', width: 90 }
    ],
    columnChooser: { enabled: true },
    allowColumnReordering: true,
    onContentReady: function () {
        var currencyIcon = $(document.createElement('i')).attr('class', 'glyphicon glyphicon-gbp').text('currencyIcon');

        $('.dx-header-row .currencySymbol').append(currencyIcon);
    }
});

通过使用onContentReady事件附加图标，如果在列中移动，它将重新附加。 需要注意的一件事是， currencySymbol CSS类将添加到该列中的每个单元格中，因此在使用jQuery选择元素时要小心。 如果您想将某些内容附加到所有currencySymbol单元格，只需使用以下选择器：

$('.currencySymbol')

我写了一篇详细的博客文章 ，描述了此过程与Font Awesome图标和Bootstrap导航菜单一起使用，但是概念是相同的。