Использование jhogrid columnchooser с множественным выбором Эрика Хайна - PullRequest
Новая
       34

Использование jhogrid columnchooser с множественным выбором Эрика Хайна

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

Я довольно новичок в jQuery, и я пытаюсь заставить простой columnChooser работать для jqGrid.Я использую панель навигации jqGrid, чтобы вставить кнопку «Добавить / удалить столбцы», и в случае нажатия этой кнопки я отображаю средство выбора столбцов.Загрузив плагин multiselect ранее, он использует его для отображения столбцов с флажками.

Вот мой код: 

$("#myGrid")
    .jqGrid({
        ...
        toppager: true,
        pager: jQuery('#myPager'),
        ...
    })
    .jqGrid('navGrid', "#myPager", { //add the navigator (defaults to the bottom of the grid)
        edit: false, add: false, del: false, search: false, refresh: false, //remove all default buttons
        cloneToTop: true //clone it, so a new one is created on top of the grid (name of the clone is <id of grid>_toppager)
    })
    .jqGrid('navButtonAdd', "#myGrid_toppager", { //add a custom button to the cloned navigator
        caption: "show/hide columns",
        onClickButton: function () {
            var colChooser = $("#colchooser_myGrid");
            if (colChooser.length == 0) {
                $("#myGrid").jqGrid('columnChooser', {
                    width: 260,
                    height: 220,
                    classname: "column-chooser",
                    msel_opts: {
                        autoOpen: true,
                        header: false,
                        height: "auto",
                        classes: "column-chooser" },
                    dlog_opts: { modal: true, resizable: false }
                });
            }
            else {
                // ??
            }
        }
    });

И мой CSS: 

.column-chooser .ui-multiselect-checkboxes {
    overflow-y: hidden;
}

Я застрял с тремя вещами:

  • кнопки (ОК и Отмена) не видны.Я не нахожу их нигде во внутреннем HTML-коде.Когда я удаляю опции, они появляются, но мультиселект не изменяется в соответствии с диалоговым окном columnChooser.
  • как мне сделать так, чтобы мультиселект был "незапираемым"?Я попытался добавить beforeclose: function () { return false; } в объект msel_opts, и это работает, но тогда значения множественного выбора остаются видимыми всегда, даже при закрытии диалога.
  • диалоговое окно отображается только один раз, а затем отказывается снова.Кажется, это потому, что он был создан, но кажется, что вызовы jqGrid уничтожают как диалоговое окно, так и множественный выбор, поэтому я не могу показать их снова.

Я использую jquery 1.4.4, jquery-ui 1.8.18, jqgrid 4.3.1 и множественный выбор 1.12, все протестированы под Firefox 11.

Ответы [ 2 ]

2 голосов
/ 27 ноября 2012

Вот код, который я написал, чтобы добавить средство выбора столбцов в сетку: 

var navButton = {
    caption: window.Constants.Grid.ShowHideColumns,
    onClickButton: function () {
        $(context.grid).jqGrid('columnChooser', {
            width: 260,
            height: 280,
            classname: "column-chooser",
            msel_opts: { //multiselect options
                autoOpen: true,
                header: false,
                height: "auto",
                classes: "column-chooser",
                beforeclose: function () { return false; } //keep multiselect drop down open  
            },
            dlog_opts: { //dialog options
                modal: false,
                resizable: false,
                draggable: false,
                dialogClass: "column-chooser",
                buttons: [
                    {
                        text: window.Constants.Dialog.OK,
                        click: function() {
                            var colModel = $(context.grid).jqGrid("getGridParam", "colModel");
                            $(".column-chooser .ui-multiselect-checkboxes li input[type=checkbox]").each(function () {
                                var colName = colModel[parseInt($(this).val(), 10)].name;
                                $(this).attr("checked") ? $(context.grid).showCol(colName) : $(context.grid).hideCol(colName);
                            });
                            $(this).dialog("close");
                        }
                    },
                    { text: window.Constants.Dialog.Cancel, click: function () { $(this).dialog("close"); } }
                ],
                close: function () {
                    $(".column-chooser").remove(); //remove all elements
                    PopupBox.hideFullOverlay();
                }
            }
        });

        PopupBox.showFullOverlay();
    }
};

var pager = $(context.grid).jqGrid("getGridParam", "pager");
$(context.grid)
    .jqGrid("navGrid", pager, { edit: false, add: false, del: false, search: false, refresh: false, cloneToTop: true }) //add a nav grid to the pager and top pager
    .jqGrid("navButtonAdd", pager, navButton) //add column button to pager
    .jqGrid("navButtonAdd", context.grid + "_toppager", navButton); //add column button to top pager

Таким образом, в этом коде context.grid является идентификатором сетки, и этот код называется после создания сетки (то есть после строки, выглядящей как $(context.grid).jqGrid({ /* insert colmodel, pager name, etc */ }))

Вот что делается для решения всех моих проблем:

  • Кнопки «ОК» и «Отмена» не отображаются: кнопки указаны в параметрах
  • для того, чтобы мультиселект был незакрытым: оставьте return false перед закрытием, но удалите select со страницы с элементом close в dlog_opts. Каким-то образом select остается на странице (как дочерний по отношению к корневому узлу).
  • Устранение того факта, что выбирающий не показывался дважды: то же самое. Удалите все элементы, когда диалоговое окно закрыто.

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

Основная проблема заключается в том, что jqGrid не создает надлежащую html-иерархию для элементов, возможно, из-за того, как работает плагин множественного выбора (он скрывает элемент select и создает рядом с ним список ul, содержащий флажки). В итоге я обнаружил, что у меня есть 3 элемента div, один из которых содержит диалог, другой содержит ul, а другой содержит select, все прямые потомки элемента body. При закрытии jqGrid покидает элемент select, и это нарушает его при втором открытии меню выбора.

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

За некоторое время до того, как я опубликовал предложение , которое я сделал после ответа на ответ .В ответе я предложил просто заменить оригинальный jqGrid columnChooser на мою модификацию относительно $.jgrid.extend({columnChooser : function(opts) {...}});.

В случае, если вы сможете использовать beforeClose обратный вызов jQuery UIДиалог.Вы также сможете использовать beforeClose: 

$grid.jqGrid('navButtonAdd', '#myGrid_toppager', {
    caption: "show/hide columns",
    //buttonicon: "ui-icon-calculator",
    //title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser', {
            dialog_opts: {
                beforeClose: function () {
                    return confirm("Do you want to close the dialog?");
                }
            }
        });
    }
});

Небольшая проблема заключается в том, что текущая реализация columnChooser обработчика события нажатия кнопки «Отмена» не вызывает beforeClose.Вы можете легко решить проблему, если измените соответствующую часть кода 

buttons[opts.bCancel] = function(event) {
    opts.cleanup(true);
};

на 

buttons[opts.bCancel] = function(event) {
    if (false === $(this).data("dialog")._trigger('beforeClose', event)) {
        return;
    }
    opts.cleanup(true);
};

См. демо .Вы увидите, что код confirm("Do you want to close the dialog?") из beforeClose будет выполнен.

...