Добавить кнопку в заголовок столбца jqgrid

Question

Есть ли способ добавить кнопку рядом с заголовком столбца?скажем сразу после «Сортировка показателей»?

для примера

|Идентификатор (кнопка) |Имя (кнопка) |

Заранее спасибо.

Answer 1

Полагаю, вы знаете, что можете включить разметку HTML в заголовки столбцов.Нужно просто поместить фрагмент HTML вместо текста в colNames.Я полагаю, что вы хотите добавить во все заголовки столбцов к некоторой кнопке со значком и выполнить некоторые пользовательские действия, если кнопка нажата.

Вы можете реализовать это требование различными способами.В демонстрации я показываю только одну из многих возможных реализаций:

при нажатии на настраиваемую кнопку будет отображаться предупреждение, в котором будет отображаться имястолбец, заголовок которого был нажат.

Соответствующий код:

var $grid = $("#list");
//... here the grid will be created
$grid.closest("div.ui-jqgrid-view").find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-jqgrid-labels > th.ui-th-column > div.ui-jqgrid-sortable")
    .each(function () {
        $('<button>').css({float: "right", height: "17px"}).appendTo(this).button({
            icons: { primary: "ui-icon-gear" },
            text: false
        }).click(function (e) {
            var idPrefix = "jqgh_" + $grid[0].id + "_",
                thId = $(e.target).closest('div.ui-jqgrid-sortable')[0].id;
            // thId will be like "jqgh_list_name"
            if (thId.substr(0, idPrefix.length) === idPrefix) {
                alert('Clicked the button in the column "' + thId.substr(idPrefix.length) + '"');
                return false;
            }
        });
    });

Answer 2

.append может быть полезным.Добавьте класс в столбец, а затем добавьте к нему кнопку с необходимым css.

Answer 3

В прошлом я использовал jquery для добавления кнопки в заголовок.Где имя моего столбца было "id":

$('#gs_id').after('<button id="clear_filters" class="button blue">Reset</button>');