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的{{1}}参数，然后根据{重新创建网格例如{3}}方法。请参阅GridUnload中的the demo。

尽管如此，我觉得你的问题非常有趣（给你+1）。至少尝试实施这种行为是一项小运动任务。

对于理解问题复杂性的一些评论。在填充网格主体的过程中，jqGrid代码根据setGridParam参数的值计算单元格的位置（请参阅multiselect值the answer的设置并稍后使用here } 例如）。因此，如果您将隐藏包含复选框的列'cb'，则单元格位置将被错误计算。 只有当“cb”列完全不存在或者您拥有gi 时，才会正确填充网格。因此，如果网格中存在“cb”列，则必须在分页或排序网格之前设置multiselect: true 。即使对于隐藏列“cb”，您也必须将multiselect: true设置为multiselect。另一方面，您必须将true设置为在填充网格后直接对应所需的实际行为的值（例如在multiselect中）。< / p>

我希望尽管我的英语不好，但我还是表达了我的意见。为了确保所有人都能正确理解我，我再重复一次。如果您想尝试动态切换loadComplete，则必须执行以下步骤：

以任何方式创建网格，multiselect拥有'cb'列
如果您想要单一选择行为，请
设置multiselect: true并隐藏multiselect: false中的'cb'列

在刷新网格之前始终设置：在分页，排序，过滤，重新加载等之前。

我创建here似乎有效。它有一个按钮，可用于切换loadComplete参数：

在演示中，我使用了multiselect: true事件的子类化（覆盖原始事件句柄）的技巧，我将其描述为the demo。

演示代码中最重要的部分，您将在下面找到：

multiselect

更新：如果在1.8版或更高版本中使用jQuery，则必须将行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"); });。可以找到修改过的演示the old answer。

Answer 2

我非常喜欢你在这里尝试做的事情，并认为这对jqGrid来说是一个很好的增强，但遗憾的是这并没有得到官方的支持。在Documentation | Options | multiselect下的jqGrid文档中，您可以看到Can be changed?的{{1}}列读取：

没有。见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>.

JQGrid - 切换多选

3 个答案: