当存在ui-icon的格式化程序时，jqGrid列对齐不起作用

Question

我有一个jqGrid列模型，如下所示。如果没有formatter，align属性可以正常工作。当我添加格式化程序以显示ui-icon时，它没有与右侧对齐（屏幕截图中的最后一列）。校正对齐的最佳jqGrid方法是什么？

jqGrid colModel

colModel: [
             { name: 'StockSymbol', key: true,  width: 150 , align: "right"},
             { name: 'StockName', width: 250, align: "right" },
             { name: 'VariationPercent',  width: 150, align: "right" },
             { name: 'GamesCount',  width: 100, align: "right" },
             { name: 'UsersCount',width: 100, align: "right" },
             { name: 'TotalPurchasedQty',  width: 150, align: "right" },
             {
                name: 'Create', index: 'StockSymbol', width: 120, align: "right",
                formatter: function (cellvalue, options, rowObject) {
                return '<span class="ui-icon ui-icon-circle-plus app-custom-button-create"  title="Create"></span>';
                 }
             }
           ],

撷取画面

Answer 1

原因很简单。类ui-icon使用CSS属性display: block，但由text-align: right上的jqGrid设置的CSS属性<td>将不会应用于块。要解决此问题，您可以将formatter修改为以下

formatter: function (cellvalue, options, rowObject) {
    return '<span class="ui-icon ui-icon-circle-plus app-custom-button-create"' +
        ' style="display:inline-block;" title="Create"></span>';
}

将display: block更改为display: inline-block。