jqgrid - JQGrid-切换多选

Question

有没有一种方法可以切换网格的multiselect选项？

如果在创建网格时multiselect不是multiselect，则更改网格的TRUE参数并要求重新加载具有禁用或不创建标题列时将标题留在后面的副作用。

我最近来的就是在创建网格时将multiselect设置为TRUE，并使用showCol和hideCol设置为toggle: $('#grid').showCol("cb").trigger('reloadGrid');
切换时具有改变网格宽度的副作用。当cb列的宽度未隐藏时，它是保留的。

基本上，我试图用“编辑/取消”按钮创建一个网格来切换multiselect，这与iPhone/iPad处理删除multiple邮件或文本消息的方式非常相似。

先感谢您。

Answer 1

我完全同意Justin的观点，jqGrid不支持动态切换multiselect参数。因此，以任何方式对其回答+1。我同意，切换multiselect参数的最简单也是唯一受支持的方法将与重新初始化(重新创建)网格有关。

因此，如果您需要更改jqGrid的multiselect参数的值，则需要首先针对multiselect更改setGridParam参数，然后根据GridUnload方法重新创建网格。请参阅the demo中的the answer。

不过，我发现您的问题非常有趣(您也为+1)。至少要尝试实现这种行为，这是一项艰巨的运动任务。

为了理解问题的复杂性而作的一些评论。在填充网格主体期间，jqGrid代码根据multiselect参数的值计算单元格的位置(请参阅gi值here的设置及其以后的用法，例如here)。因此，如果您将隐藏具有复选框的'cb'列，则单元格位置将被错误地计算。 仅当列'cb'根本不存在或您具有multiselect: true 时，网格才能正确填充。因此，如果网格中存在“cb”列，则必须在对页面进行分页或排序之前设置multiselect: true。即使对于隐藏列'cb'，您也必须将multiselect设置为true。另一方面，您必须将multiselect设置为与填充网格后直​​接需要的真实行为相对应的值(例如loadComplete中)。

我希望我能清楚地表达我的英语水平。为了确保所有人都能正确理解我，我会再重复一次。如果要尝试动态切换multiselect，则必须执行以下步骤:

用multiselect: true以任何方式创建网格以使'cb'列

设置multiselect: false并在loadComplete中隐藏'cb'列(如果您希望具有单个选择行为)

总是在刷新网格之前设置multiselect: true:在分页，排序，过滤，重新加载等之前。

我创建了 the demo，它似乎可以正常工作。它具有可用于切换 multiselect参数的按钮:

在演示中，我将技巧与 the old answer的子类别 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");
});

更新后的:如果使用1.8或更高版本的jQuery，则必须将 events = $grid.data("events");行更改为 events = $._data($grid[0], "events");。可以找到修改后的演示 here。