jqgrid treegrid中的自定义图标答案

【问题标题】：custom icons in jqgrid treegridjqgrid treegrid中的自定义图标
【发布时间】：2012-02-29 21:35:52
【问题描述】：

目前看来，treegrid 的寻呼机功能已禁用。但是我想添加一些自定义图标，例如导出图标，刷新到顶部分页，如下所示。是否还有其他替代方法可以为 treegrid 实现此功能。提前谢谢...

【问题讨论】：

【解决方案1】：

首先，我建议您阅读the answer，其中描述了如何将toppager 添加到网格中。您可以对树形网格执行相同的操作。

toppager 的 id 将从网格 id 构造。例如，如果网格 id 是“treegrid”，那么 toppager 的 id 将是“treegrid_toppager”。寻呼机将保存树部分：左、中和右。因为树形网格的 toppager 将始终为空，如果您删除或隐藏中心部分，您可以将位置保存在 pager 上：

$('#treegrid_toppager_center').hide();

如果您将在 <span> 元素内包含您可以定义的 CSS 样式的文本，您可以归档导航栏中文本位置的下一个改进。例如

$grid.jqGrid('navGrid', '#treegrid_toppager',
    {add: false, edit: false, del: false, search: false,
        refreshtext: '<span class="ui-pg-text">Refresh</span>'});
$grid.jqGrid('navButtonAdd', '#treegrid_toppager', {
    caption: '<span class="ui-pg-text">Columns</span>',
    buttonicon: "ui-icon-wrench",
    onClickButton: function () {
        this.jqGrid("columnChooser");
    }
});

和

.ui-jqgrid-toppager .navtable .ui-pg-div .ui-pg-text {
    position: relative;
    top: 1px;
    padding-right: 3px;
    float: left;
}

另外，我发现最好包含一个额外的 CSS 定义

.ui-jqgrid-toppager .navtable {
    padding-top: 1px;
    padding-bottom: 0px;
}

这可以稍微改善一下toppager中按钮的位置。

你可以在the following demo看到的结果：

【讨论】：

@varaprakash：一般性评论。您每天有权投票支持大约 30 个问题和答案（请参阅 here），但您在 6 个月内仅使用了 5 次该权利。我的意思是现在不是我的回答 :-) 投票有助于页面的其他访问者，并将被搜索引擎大量使用。因此，如果您在 stackoverflow 上找到一些有用的信息，请对答案或问题或两者进行投票。它将帮助 stackoverflow 的其他用户。
好的，谢谢奥列格，不知道这一点，但我从这个答案开始:)
@varaprakash：好的！我希望你理解我的正确。首先，我希望其他用户能够找到 stackoverflow 上已经存在的信息。