jqgrid - jqgrid treegrid中的自定义图标

Question

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

Answer 1

首先，我建议您阅读描述如何将 toppager 添加到网格的答案。你可以对树网格做同样的事情。

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

$('#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中按钮的位置。

您可以在以下演示中看到结果：