Есть ли полный рабочий пример для jqGrid ColumnChooser?

В http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods есть инструкции для построения выбора столбца jqGrid ('dlog_opts - это либо объект-вариант, который должен быть передан в "dlog", или (более вероятно) функцию, которая создает объект options. По умолчанию создается подходящий объект параметров для ui.dialog '), но не полный рабочий код; не предоставляется пример требуемой функции.

Есть ли полный рабочий пример для построения выбора столбца jqGrid, который позволит скрывать, показывать и перемещать столбцы?

ОТВЕТЫ

Ответ 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 на основе мое предложение.