显示引导图标和 jqgrid 标题文本答案

【问题标题】：Displaying bootstrap icon along with jqgrid caption text显示引导图标和 jqgrid 标题文本
【发布时间】：2015-05-11 23:34:01
【问题描述】：

我正在尝试在 jqgrid 标题部分显示 twitter 引导图标，但该图标未显示。这里是提琴手：https://jsfiddle.net/99x50s2s/31/

代码尝试：

jQuery("#sg1").jqGrid({
    datatype: "local",
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
    height: 'auto',
    viewrecords: true,
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    caption: "<i class'glyphicon glyphicon-alert'></i> Pending"
});

电流输出：

预期：

我错过了什么吗？是否可以在 jqgrid 标题中显示引导图标？请提出建议。

【问题讨论】：

尝试添加 $('.ui-jqgrid-title').addClass('glyphicon glyphicon-alert');
@Sushil，它不起作用。
试试这个jsfiddle.net/99x50s2s/32
即使是演示中的水平工具栏也显示与 jqGrid 4.6 和 Bootstrap 有更多的 CSS 兼容性问题。我建议您尝试支持 Font Awesome 的free jqGrid（请参阅wiki）以及通常的灵活图标数据集。例如，如果您不想使用 Font Awesome 图标，可以使用纯引导图标 Glyphicon（请参阅the answer）。

标签： javascript jquery css twitter-bootstrap jqgrid

【解决方案1】：

这是一个错字。你错过了=：

 caption: "<i class'glyphicon glyphicon-alert'></i> Pending"

应该是：

 caption: "<i class='glyphicon glyphicon-alert'></i> Pending"

https://jsfiddle.net/99x50s2s/33/

【讨论】：

好收获。我不知道我是怎么错过的。但仍然没有显示图标。
你没有看到 jsfiddle 中的图标吗？它为我显示。
我现在看到了。谢谢。