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参数方法将与重新初始化(重新创建)网格相关联.

因此,如果您需要更改multiselectjqGrid 的参数值,您需要首先更改multiselect参数,setGridParam然后重新创建关于GridUnload方法的网格.从答案中看到演示.

不过我觉得你的问题很有意思(给你+1).至少尝试实现这种行为是一项小运动任务.

一些评论用于理解问题的复杂性.在填充网格的主体期间,jqGrid代码基于multiselect参数的值计算单元的位置(参见此处的gi值的设置并且稍后使用它,例如这里).因此,如果您将隐藏包含复选框的列'cb',则单元格位置将被错误计算.只有当'cb'列完全不存在或者你没有时,网格才会正确填充.因此,如果网格中存在列"cb",则必须在对网格进行分页或排序之前进行设置.即使对于隐藏列'cb',您也必须设置为.另一方面,您必须设置为与填充网格后直接需要的实际行为相对应的值(例如,在)中.multiselect: truemultiselect: true multiselecttruemultiselectloadComplete

我希望尽管我的英语不好,但我还是表达了我的意思.为了确保所有人都能正确理解我,我再重复一次.如果您想尝试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");
});

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