пользовательские значки в jqgrid treegrid - PullRequest
Новая
       5

пользовательские значки в jqgrid treegrid

0 голосов
/ 01 марта 2012

Кажется, функциональность пейджера в настоящее время отключена для дерева. Но я хотел бы добавить несколько пользовательских значков, таких как значок экспорта, обновить страницу сверху, как показано ниже. Существуют ли другие альтернативы для достижения этой функциональности для TreeGrid. Заранее спасибо ...

1 Ответ

1 голос
/ 01 марта 2012

Прежде всего, я бы порекомендовал вам прочитать ответ , в котором описано, как добавить toppager в таблицу. Вы можете сделать то же самое с сеткой деревьев.

Идентификатор toppager будет создан из идентификатора сетки. Если идентификатор сетки, например, «treegrid», то идентификатором топпэгера будет «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 

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

, что может немного улучшить положение кнопок в toppager.

Результаты, которые вы можете увидеть на следующей демонстрации :

enter image description here

...