Ответ 1
Посмотрите старый пример из . Пример в основном касается другого объекта, но на панели навигации вы можете увидеть кнопку "Выбор столбца". Нажатие на диалог выбора столбца отображения кнопки. Вы можете перетащить любое имя столбца из диалогового окна и перенести его в другое место, чтобы изменить порядок столбцов. Вы можете нажать "-", чтобы скрыть столбец и перетащить любой столбец из списка скрытых столбцов и поместить его в список видимых столбцов.
Чтобы воспроизвести поведение, вы должны сначала убедиться, что во время загрузки jqGrid у вас есть "jQuery UI addons" (grid.jqueryui.js
). Затем вы должны выполнить следующие шаги:
-
включить
ui.multiselect.css
из поддиректории plugins источника jqGrid 4.0. -
включить jQuery UI
jquery-ui.min.js
(а не толькоjquery-ui.css
, как правило, для jqGrid) -
включить
ui.multiselect.js
послеjquery-ui.min.js
-
добавить новую кнопку, которая вызывает выбор столбца
Код может выглядеть следующим образом:
var grid = $('#list');
grid.jqGrid ('navButtonAdd', '#pager',
{ caption: "", buttonicon: "ui-icon-calculator",
title: "Choose Columns",
onClickButton: function() {
grid.jqGrid('columnChooser');
}
});
ОБНОВЛЕНО: В ответе содержится описание дополнительной настройки columnChooser
на основе мое предложение.