JQGrid - переключение множественного выбора

Question

Есть ли способ переключить параметр multiselect сетки?

Изменение параметра multiselect сетки и вызов перезагрузки имеет побочный эффект - оставить заголовок позади при отключенииили не создавать столбец заголовка, если multiselect не был TRUE при создании сетки.

Самое близкое, что я пришел, это установка multiselect в TRUE при создании сетки и использовании showCol и *От 1012 * до toggle: $('#grid').showCol("cb").trigger('reloadGrid');

Это побочный эффект изменения ширины сетки при переключении.Похоже, ширина столбца cb зарезервирована, когда она не скрыта.

В основном я пытаюсь создать сетку с помощью кнопки «редактировать / отменить» для переключения multiselect - очень похоже на то, какiPhone / iPad обрабатывает удаление multiple почты или текстовых сообщений.

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

Answer 1

Я полностью согласен с Джастином, что jqGrid не поддерживает динамическое переключение параметра multiselect. Так что +1 к его ответу никак. Я согласен, что самый простой и единственный поддерживаемый способ переключения параметра multiselect будет связан с повторной инициализацией (повторным созданием) сетки.

Так что, если вам нужно изменить значение параметра multiselect в jqGrid, вам нужно сначала изменить параметр multiselect относительно setGridParam, а затем заново создать сетку относительно GridUnload метод например. См. демоверсию от ответа .

Тем не менее я нахожу ваш вопрос очень интересным (+1 для вас тоже). По крайней мере, это небольшая спортивная задача - реализовать поведение.

Несколько замечаний для понимания сложности проблемы. При заполнении тела сетки код jqGrid вычисляет позиции ячеек на основе значения параметра multiselect (см. Настройку gi значение здесь и использование его позже, здесь например). Поэтому, если вы скроете столбец «cb», который содержит флажки, положение ячейки будет вычислено неправильно. Сетка будет заполнена правильно только в том случае, если столбец «cb» вообще не существует или если у вас есть multiselect: true. Таким образом, вы должны установить multiselect: true перед разбиением на страницы или сортировкой сетки, если в сетке существует столбец cb. Даже для скрытого столбца cb вы должны установить multiselect на true. С другой стороны, вы должны установить multiselect на значение, которое соответствует реальному поведению, которое вам нужно непосредственно после заполнения сетки (например, в loadComplete).

Надеюсь, я ясно выразил свое мнение, несмотря на мой плохой английский. Чтобы быть уверенным, что все меня правильно поняли, повторяю то же самое еще раз. Если вы хотите попытаться динамически переключать multiselect, вам нужно выполнить следующие шаги:

• создать сетку любым способом с multiselect: true, чтобы иметь столбец 'cb'
• установить multiselect: false и скрыть столбец 'cb' в loadComplete, если вы хотите иметь режим одиночного выбора
• установить multiselect: true всегда до обновить сетку: до подкачки, сортировки, фильтрации, перезагрузки и т. Д.

Я создал демо , которое, кажется, работает. Имеет кнопку, с помощью которой можно переключать параметр multiselect:

В демоверсии я использовал трюк с подклассами (перезапись исходного дескриптора события) события reloadGrid, которое я описал старый ответ .

Наиболее важные части кода из демоверсии вы найдете ниже:

var events, originalReloadGrid, $grid = $("#list"), multiselect = false,
    enableMultiselect = function (isEnable) {
        $(this).jqGrid('setGridParam', {multiselect: (isEnable ? true : false)});
    };

$grid.jqGrid({
    // ... some parameters
    multiselect: true,
    onPaging: function () {
        enableMultiselect.call(this, true);
    },
    onSortCol: function () {
        enableMultiselect.call(this, true);
    },
    loadComplete: function () {
        if (!multiselect) {
            $(this).jqGrid('hideCol', 'cb');
        } else {
            $(this).jqGrid('showCol', 'cb');
        }
        enableMultiselect.call(this, multiselect);
    }
});
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {},
    {multipleSearch: true, multipleGroup: true, closeOnEscape: true, showQuery: true, closeAfterSearch: true});

events = $grid.data("events"); // read all events bound to
// Verify that one reloadGrid event hanler is set. It should be set
if (events && events.reloadGrid && events.reloadGrid.length === 1) {
    originalReloadGrid = events.reloadGrid[0].handler; // save old
    $grid.unbind('reloadGrid');
    $grid.bind('reloadGrid', function (e, opts) {
        enableMultiselect.call(this, true);
        originalReloadGrid.call(this, e, opts);
    });
}

$("#multi").button().click(function () {
    var $this = $(this);
    multiselect = $this.is(":checked");
    $this.button("option", "label", multiselect ?
                "To use single select click here" :
                "To use multiselect click here");
    enableMultiselect.call($grid[0], true);
    $grid.trigger("reloadGrid");
});

ОБНОВЛЕНО : В случае использования jQuery в версии 1.8 или выше необходимо изменить строку events = $grid.data("events"); на events = $._data($grid[0], "events");. Здесь можно найти модифицированную демоверсию .

Answer 2

Мне действительно нравится то, что вы пытаетесь сделать здесь, и я думаю, что это было бы большим улучшением для jqGrid, но, к сожалению, это официально не поддерживается.В документации jqGrid под Документация |Варианты |Multiselect Вы можете увидеть столбец Can be changed? для multiselect читает:

Нет.см. HOWTO

Было бы неплохо, если бы была ссылка или дополнительная информация об этом HOWTO.В любом случае, возможно, именно поэтому вы сталкиваетесь со всем странным поведением.Возможно, вам удастся обойти эту проблему, если вы попытаетесь достаточно усердно - если это так, рассмотрите возможность размещения своего решения здесь.

В качестве альтернативы, возможно, вы могли бы повторно инициализировать сетку на месте и изменить ее с / на мультивыбрать сетку?Не идеальное решение, поскольку пользователю придется дольше ждать, пока будет настроена сетка, но это, вероятно, самое быстрое решение.

Answer 3

Более простой ответ:

<input type="button" value="Multiselect" onclick="toggle_multiselect()"> 

<script>
function toggle_multiselect()
{
    if ($('#list1 .cbox:visible').length > 0)
    {
        $('#list1').jqGrid('hideCol', 'cb'); 
        jQuery('.jqgrow').click(function(){ jQuery('#list1').jqGrid('resetSelection'); this.checked = true; });
    }
    else
    {
        $('#list1').jqGrid('showCol', 'cb');
        jQuery('.jqgrow').unbind('click');
    }
}
</script>

Where list1 is from <table id="list1"></table>.