在 jqGrid 中内联编辑行时出现排序列的问题答案

【问题标题】：Issue with sorting column while editing rows inline in jqGrid在 jqGrid 中内联编辑行时出现排序列的问题
【发布时间】：2012-02-14 16:24:10
【问题描述】：

我对网格的使用涉及排序，同时在内联编辑模式下有几行。

问题是：

有没有什么方法可以在编辑一行或多行的同时执行排序？
如果没有，当我在内联编辑一行或多行时单击列标题时是否会发生跳转事件？（在对内容进行排序之前，我可以删除编辑的事件）

谢谢，卡塔林

【问题讨论】：

标签： jqgrid

【解决方案1】：

一个有趣的问题！来自我的 +1。

编辑行或单元格的排序问题在于对编辑单元格的包含的访问。 jqGrid 的当前代码不这样做，因此在列标题上的click 事件处理程序内部有测试网格中是否有任何编辑行。如果存在一些编辑行，则排序将停止调用onSortCol回调。

因此，只有在排序之前保存或恢复编辑单元格的第二种方法是可能的。要实现这一点，有一个小问题。如果在列标题上绑定额外的click 事件，它将在jqGrid 的前一个绑定标准处理程序之后调用。所以不能保存或丢弃编辑更改之前点击事件将被处理。可以通过两种方式解决该问题：一种可以从新的事件处理程序调用sortData 函数，或者一种应该更改绑定到click 事件的顺序。以下代码演示了第二种方法：

$.each($grid[0].grid.headers, function () {
    var $th = $(this.el), i, l, clickHandler, clickHandlers = [],
        currentHandlers = $th.data('events'),
        clickBinding = currentHandlers.click;

    if ($.isArray(clickBinding)) {
        for (i = 0, l = clickBinding.length; i < l; i++) {
            clickHandler = clickBinding[i].handler;
            clickHandlers.push(clickHandler);
            $th.unbind('click', clickHandler);
        }
    }
    $th.click(function () {
        var p = $grid[0].p, savedRow = p.savedRow, j, len = savedRow.length;
        if (len > 0) {
            // there are rows in cell editing or inline editing
            if (p.cellEdit) {
                // savedRow has the form {id:iRow, ic:iCol, name:nm, v:value}
                // we can call restoreCell or saveCell
                //$grid.jqGrid("restoreCell", savedRow[0].id, savedRow[0].ic);
                $grid.jqGrid("saveCell", savedRow[0].id, savedRow[0].ic);
            } else {
                // inline editing
                for (j = len - 1; j >= 0; j--) {
                    // call restoreRow or saveRow
                    //$grid.jqGrid("restoreRow", savedRow[j].id);
                    $grid.jqGrid("saveRow", savedRow[j].id);
                }
            }
        }
    });
    l = clickHandlers.length;
    if (l > 0) {
        for (i = 0; i < l; i++) {
            $th.bind('click', clickHandlers[i]);
        }
    }
});

其中$grid 定义为var $grid = $("#list")。你可以在the following demo上看到它是如何工作的。

【讨论】：

@Oleg，我正在尝试您的解决方案，但没有成功，currentHandlers 在clickBinding = currentHandlers.click 中未定义...也许您有提示？
@eklam：您使用哪个版本的 jQuery 进行“子类化”事件句柄？如果你使用 jQuery 1.8 或更高版本，你应该使用$._data($th[0], "events"); 而不是$th.data('events')。
感谢您更新该 Oleg，我很惊讶自此答案以来此修复程序不在 JQGrid 中..
@Oleg：这在 free-jqgrid 4.14 中有效吗？我试过没有运气。
@SKumar：你的演示在哪里？您使用哪个版本的 jQuery？你用过$th.data('events') 还是$._data($th[0], "events")（见之前的cmets）？

【解决方案2】：

如果您想尝试选项 2，您可以挂钩 onSortCol 事件。在那里，您可以取消所有行的编辑模式，然后允许执行排序。请确保不要返回"stop"，否则排序根本不会发生。

在单击可排序列之后和对数据进行排序之前立即引发。

您可以获取所有文档here。

【讨论】：