【问题标题】:JQGrid - toggling multiselectJQGrid - 切换多选
【发布时间】:2012-01-09 23:45:53
【问题描述】:

有没有办法切换网格的multiselect 选项?

如果在创建网格时multiselect 不是TRUE,则更改网格的multiselect 参数并调用重新加载具有在禁用或不创建标题列时留下标题的副作用。

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

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

基本上,我试图创建一个带有“编辑/取消”按钮的网格来切换multiselect——非常类似于 iPhone/iPad 处理删除multiple 邮件或短信的方式。

提前谢谢你。

【问题讨论】:

    标签: jqgrid


    【解决方案1】:

    我完全同意 Justin 的观点,即 jqGrid 不支持动态切换 multiselect 参数。所以以任何方式对他的回答+1。我同意,切换multiselect 参数的最简单且唯一受支持的方法将与重新初始化(重新创建)网格相关联。

    因此,如果您需要更改 jqGrid 的 multiselect 参数的值,您需要首先更改 multiselect 参数相对于 setGridParam,然后重新创建相对于 GridUnload 方法的网格,例如。从the answer 看到the demo。

    不过,我觉得你的问题很有趣(你也可以 +1)。至少尝试实现该行为是一项小运动任务。

    一些用于理解问题复杂性的评论。在填充网格主体期间,jqGrid 代码根据multiselect 参数的值计算单元格的位置(参见gi 值here 的设置以及稍后使用它,例如here)。因此,如果您隐藏包含复选框的“cb”列,则单元格位置将被计算错误。 只有当“cb”列根本不存在或您有multiselect: true时,才会正确填充网格。因此,如果网格中存在“cb”列,则必须设置multiselect: truebefore 分页或网格排序。即使对于隐藏列“cb”,您也必须将multiselect 设置为true。另一方面,您必须将multiselect 设置为与您需要直接填充网格后的实际行为相对应的值(例如在loadComplete 中)。

    尽管我的英语很差,但我希望我能清楚地表达我的意思。为了确保所有人都正确理解我,我再重复一遍。如果您想尝试动态切换multiselect,您必须执行以下步骤:

    • 使用multiselect: true 以任何方式创建网格以获得“cb”列
    • 如果您想要单选行为,请设置 multiselect: false 并隐藏 loadComplete 中的“cb”列
    • 设置multiselect: true总是之前刷新网格:在分页、排序、过滤、重新加载等之前。

    我创建了the demo,这似乎可行。它有一个可以用来切换multiselect参数的按钮:

    在演示中,我使用了 reloadGrid 事件的子类化(覆盖原始事件句柄)的技巧,我描述了 the old answer。

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

    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");。可以找到修改后的demohere。

    【讨论】:

    • @JustinEthier -- 但你没有 +1 他 :)
    • @david - 你也没有:)。抱歉,今天很忙 - 现在给 Oleg +1。
    • 这里也一样——我会给你+1,但我不能。非常感谢。
    • 在您的演示中实现代码后,我发现您的演示出现了与我的代码相同的问题(我假设您的代码解决了我尚未遇到的问题,所以我会坚持你的)。如果您在演示中添加“autowidth:true”,我想您会看到我遇到的问题。当网格打算填充整个 div 或页面时,它不会在 cb 列隐藏时。一切正常,只是不是 100% 显示在显示屏上。
    • @user1073957:不客气!获得 15 个声望点后,您将能够使用 stackoverflow 上最重要的权利:每天投票大约 30 个问题或答案。它将帮助其他用户找到好的问题和有用的答案。我想你很快就会存档 15 分等级。
    【解决方案2】:

    我真的很喜欢你在这里尝试做的事情,并且认为这对 jqGrid 来说是一个很大的改进,但不幸的是,这并没有得到官方的支持。在Documentation | Options | multiselect 下的jqGrid 文档中,您可以看到multiselect 的Can be changed? 列如下:

    没有。见方法

    如果有关于该 HOWTO 的链接或更多信息,那就太好了。无论如何,这可能就是您遇到所有奇怪行为的原因。如果您足够努力,您也许可以解决它 - 如果是这样,请考虑在此处发布您的解决方案。

    或者,也许您可​​以重新初始化网格并将其从/更改为多选网格?这不是一个理想的解决方案,因为用户必须等待更长的时间才能设置网格,但这可能是最快的解决方案。

    【讨论】:

    • 我会给你+1,但显然我太低级了,无法投票。谢谢你。 :-(
    【解决方案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>.
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-05-21
      • 1970-01-01
      • 2013-07-28
      • 2011-11-04
      • 2011-05-11
      • 2011-05-10
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多