JQGrid-切换多选 [英] JQGrid - toggling multiselect

问题描述

是否可以切换网格的multiselect选项?

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

我最接近的是在创建网格时将multiselect设置为TRUE，并将showCol和hideCol设置为toggle: $('#grid').showCol("cb").trigger('reloadGrid');

这具有在切换时更改网格宽度的副作用.似乎cb列的宽度在未隐藏时是保留的.

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

谢谢.

解决方案

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

因此，如果您需要更改jqGrid的multiselect参数的值，则需要首先相对于setGridParam更改multiselect参数，然后相对于演示 .com/a/4232168/315935>答案.

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

为理解问题的复杂性而作的一些评论.在填充网格主体期间，jqGrid代码根据multiselect参数的值计算单元格的位置(请参见gi值的设置multiselect: true 时，网格才会正确填充.因此，如果网格中存在列"cb"，则必须在网格的分页或排序之前设置multiselect: true .即使对于隐藏列"cb"，也必须将multiselect设置为true.另一方面，必须将multiselect设置为与填充网格后直​​接 (例如，在loadComplete中)所需的真实行为相对应的值.

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

• 使用multiselect: true以任何方式创建网格以具有"cb"列
• 设置multiselect: false并在loadComplete中隐藏'cb'列，如果您希望具有单一选择行为
设置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");
});
 

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

Is there a way to toggle the multiselect option of a grid?

Changing the multiselect parameter of the grid and calling for a reload has the side-effect of leaving the header behind when disabling or not creating the header column if multiselect was not TRUE upon the grid creation.

The closest I have come is setting multiselect to TRUE upon grid creation and using showCol and hideCol to toggle: $('#grid').showCol("cb").trigger('reloadGrid');

This has a side effect of changing the grid width when toggled. It appears the cb column width is reserved when it is not hidden.

Basically I'm attempting to create a grid with an "edit/cancel" button to toggle the multiselect -- very similar to how the iPhone/iPad handles deleting multiple mail or text messages.

Thank you in advance.

解决方案

I full agree with Justin that jqGrid don't support toggling of multiselect parameter dynamically. So +1 to his answer in any way. I agree, that the simplest and the only supported way to toggle multiselect parameter will be connected with re-initialize (re-creating) the grid.

So if you need to change the value of multiselect parameter of jqGrid you need first change multiselect parameter with respect of respect setGridParam and then re-creating the grid with respect of GridUnload method for example. See the demo from the answer.

Nevertheless I find your question very interesting (+1 for you too). It's a little sport task at least to try to implement the behavior.

Some remarks for the understanding the complexity of the problem. During filling of the body of the grid jqGrid code calculate positions of the cells based on the value of multiselect parameter (see setting of gi value here and usage it later, here for example). So if you will hide the column 'cb', which hold the checkboxes, the cell position will be calculated wrong. The grid will be filled correctly only if either the column 'cb' not exists at all or if you have multiselect: true. So you have to set multiselect: true before paging or sorting of the grid if the column 'cb' exist in the grid. Even for hidden column 'cb' you have to set multiselect to true. On the other side you have to set multiselect to the value which corresponds the real behavior which you need directly after filling of the grid (for example in the loadComplete).

I hope I express me clear inspite of my bad English. To be sure that all understand me correctly I repeat the same one more time. If you want try to toggle multiselect dynamically you have to do the following steps:

• create grid in any way with multiselect: true to have 'cb' column
• set multiselect: false and hide 'cb' column in the loadComplete if you want to have single select behavior
• set multiselect: true always before refreshing the grid: before paging, sorting, filtering, reloading and so on.

I created the demo which seems to work. It has the button which can be used to toggle multiselect parameter:

In the demo I used the trick with subclassing (overwriting of the original event handle) of reloadGrid event which I described the old answer.

The most important parts of the code from the demo you will find below:

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");
});

UPDATED: In case of usage jQuery in version 1.8 or higher one have to change the line events = $grid.data("events"); to events = $._data($grid[0], "events");. One can find the modified demo here.

这篇关于JQGrid-切换多选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！