jqgrid - jqgridtreegridのカスタムアイコン

Question

現在、treegridではPager機能が無効になっているようです。ただし、エクスポートアイコンなどのカスタムアイコンを追加し、以下に示すように上部のページに更新します。ツリーグリッドでもこの機能を実現するための他の選択肢はありますか？前もって感謝します...

Answer 1

まず、トップページャーをグリッドに追加する方法を説明する回答を読むことをお勧めします。ツリー グリッドでも同じことができます。

トップページャーの ID は、グリッド ID から構築されます。たとえば、グリッド ID が「treegrid」の場合、トップページャーの ID は「treegrid_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 定義をもう 1 つ含めることをお勧めします。

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

これにより、トップページャーのボタンの位置が少し改善されます。

次のデモで確認できる結果: