Как убедить JqGrid columnChooser использовать правильный интерфейс?

Question

На демонстрационном веб-сайте для jqGrid модуль columnChooser отображается следующим образом:

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

К сожалению, когда я ввожу этот раздел кода в свое приложение (код, который должен сделать это, выглядит точно так, как изображено):

jQuery("#colch").jqGrid('navButtonAdd','#pcolch',
                        { caption: "Columns",
                          title: "Reorder Columns",
                          onClickButton : function (){
                              jQuery("#colch").jqGrid('columnChooser');
                          } 
                        // ...

Отображает выбор столбца; однако он позволяет вам выбирать, какие столбцы отображать, а не порядок их появления. Еще одно заметное отличие состоит в том, что интерфейс выглядит не так, как указано выше, это просто список столбцов, которые вы либо выбираете, либо отменяете выбор, нажимая их, нажимая клавишу управления, чтобы выбрать их по одному, или нажимая клавишу Shift, чтобы выбрать их оптом. 1011 *

Вот ссылка на демонстрационный сайт, который можно использовать в качестве ссылки. http://trirand.com/blog/jqgrid/jqgrid.html

Answer 1

Проблема, с которой вы столкнулись, хорошо известна.Функция выбора столбцов описана здесь http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#column_chooser и является примером интеграции jqGrid с другими сторонними компонентами .Существует множество вариантов выбора виджетов jQuery UI (подключаемый модуль) (см. http://plugins.jquery.com/project/Multiselect, http://quasipartikel.at/multiselect/ и http://github.com/michael/multiselect/), которые состоят в основном из двух файлов:

• ui.multiselect.css
• ui.multiselect.js

Если вы внимательно прочитаете http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#column_chooser, вы найдете информацию об этих внешних файлах.

Так что вы сможетечтобы использовать функцию выбора столбцов, как вы видите на демонстрационной странице, вам нужно сделать следующее (вместе со стандартными шагами):

• включить ui.multiselect.css таблицу стилей
• включить JavaScript-файл jQuery UI, например jquery-ui.min.js и не только css (например, jquery-ui-1.8.2.custom.css), для которого требуется jqGrid
• , включая ui.multiselect.js

Если вы загружаете jqGrid из http://www.trirand.com/blog/?page_id=6 вам нужно выбрать «Query UI addons». Файлы ui.multiselect.css и ui.multiselect.js вы найдете в подкаталогах src\css и src загруженного ZIP-файла.

Необязательные дополнительные файлы локализациидля виджета Mulitselect вы можете скачать с http://quasipartikel.at/multiselect/ или http://github.com/michael/multiselect/.