使用jqGrid内联编辑进行排序

时间:2013-04-03 17:06:20

标签: javascript jquery jqgrid

有没有直接的方法可以在客户端对jqGrid的数据进行排序并进行内联编辑? 即使单击行标题,当行可编辑时,它也不会排序数据。

3 个答案:

答案 0 :(得分:3)

如果正在编辑某些行,则无法对网格进行排序。我认为你的问题的原因是对内联编辑如何工作以及排序如何工作的误解。

在编辑开始时,编辑行中的原始数据将保存在内部参数savedRow数组中。用户可以随时将当前修改恢复为原始状态或将当前值保存在网格中。如果启用了keys: true内联编辑选项,则用户可以使用 Esc Enter 键来还原/保存当前行的更改。允许在编辑模式下可以同时存在多行,用户可以保存一些行,还可以保存其他一些行。

网格排序意味着重建完整网格内容从内部postData参数应用当前过滤器。 jqGrid 支持多个页面。网格排序意味着始终对网格的所有数据上的可选过滤进行排序。排序后,如果只应显示基于page参数值的当前页面。

要对处于编辑模式的网格进行排序,需要决定当前编辑行应该做什么。在普通情况下,丢弃当前的变化和保存都不是好的解决方案。即使首先尝试保存当前编辑数据(旧状态和当前状态),然后对数据进行排序,然后再次开始编辑,在常见情况下无法工作。这可能是许多实施问题

  1. 当前编辑行可能位于另一个页面上,现在不可见
  2. 现在可以更改数据。因此,使用旧数据填充savedRow数组可能是错误的,并且当前的编辑数据也可能是错误的。
  3. 可以从其他用户删除当前编辑行。因此它不能存在于新的网格内容中。
  4. 如果我们决定在排序之前保存数据,那么在保存期间可能会出现一些验证错误或并发错误。因此,需要首先要求用户在保存之前解决所有冲突。
    ...
  5. 因此,对于处于编辑模式的网格排序并不容易。实施方式可能取决于项目要求。由于上述问题(以及我未提及的许多其他问题),jqGrid只测试内部savedRow数组(用于在编辑开始之前保存旧状态行)是否为空。如果savedRow数组不为空,那么现在正在编辑的某些行或单元格(在出售编辑模式的情况下)。如果对相应列标题的任何点击都将被忽略,并且不进行排序。

答案 1 :(得分:1)

我遇到了同样的问题 - 如果任何行处于编辑模式,则无法排序。在我的情况下,用户编辑的状态并不重要。我的网格是clientSide,用户单击以提交更改的页面上有一个保存按钮。

我做了一些挖掘,找到了适合我的解决方案。我希望它能帮助别人。基本上我所做的是重新排序列标题上的点击事件,以便我的第一个。然后在我的点击事件中,我调用saveRows。

以下是我从另一个帖子here about reordering events获得的一段代码:

        $.fn.bindUp = function(name, fn) {
        // bind as you normally would
        // don't want to miss out on any jQuery magic
        this.on(name, fn);

        // Thanks to a comment by @Martin, adding support for
        // namespaced events too.
        this.each(function() {
            var handlers = $._data(this, 'events')[name.split('.')[0]];
            // take out the handler we just inserted from the end
            var handler = handlers.pop();
            // move it at the beginning
            handlers.splice(0, 0, handler);
        });
    };

然后在我的代码中添加一个处理程序来保存行:

        $("th.ui-th-column", $("#pacPaymenReviewGridNEW")[0].grid.hDiv).bindUp('click', function(e) {
        var $th = $(e.currentTarget).closest("th");
        if ($th.length > 0) {
            pacTransferFundMaint.saveRowsById('#pacPaymenReviewGridNEW');
        }
    });     

答案 2 :(得分:0)

经过研究,我发现了以下算法:

  1. 抓住标题点击事件。例如( '日')。点击(函数(){})
  2. 发生此事件时,使用saveRow保存处于编辑模式的行数据
  3. 识别单击的标题。
  4. 使用该标题按升序或降序对网格数据进行排序。 例如
    $('#dataGrid').jqGrid('setGridParam', ({ data: list, sortname: columnHeader, sortorder: 'asc',rowNum: list.length })).trigger('reloadGrid');

  5. 使所选行再次可编辑。 editRow可以用于此目的。

  6. 注意:第2步到第5步应该在第1步(标题点击事件)中执行