jqgrid frozenColumns +(单元格编辑和非冻结列的 sortable/reordering)

jqgrid frozenColumns + (cell Edit & sortable/reordering of non frozen columns)

请指导我使用 jqgrid 冻结一组列,其余列具有单元格编辑功能以及列重新排序/显示-隐藏选项。

谢谢。

问题是 setFrozenColumns 当前的实施有一些限制。编辑(在任何编辑模式下)和 sortable: true 不允许 冻结列 ,但 setFrozenColumns。此外 sortable: true 不应允许使用 headers 冻结列。另一方面,setFrozenColumns 包含一些参数的简单测试(参见 here),如果设置了某些此类参数(如 cellEditsortable),该方法将不执行任何操作。

我在 the post (with the demo) the way how to implement a workaround. The way is modification of approach from the answer and this one 中建议。

我觉得你的问题很有趣,所以我创建了 the demo 来演示如何实现你的要求。它显示以下结果(动画 gif):

主要使用以下代码

// create the grid
$grid.jqGrid({
    ...
});

$grid.bind("jqGridLoadComplete jqGridInlineEditRow jqGridAfterEditCell jqGridAfterRestoreCell jqGridInlineAfterRestoreRow jqGridAfterSaveCell jqGridInlineAfterSaveRow", function () {
    fixPositionsOfFrozenDivs.call(this);
});

$grid.jqGrid("setGridParam", {cellEdit: false, sortable: false});
$grid.jqGrid("setFrozenColumns");
$grid.jqGrid("setGridParam", {cellEdit: true, sortable: true});
fixPositionsOfFrozenDivs.call($grid[0]);

try {
    var p = $grid.jqGrid("getGridParam"), tid = $.jgrid.jqID(p.id), colModel = p.colModel, i, n = colModel.length, cm,
        skipIds = [];

    for (i = 0; i < n; i++) {
        cm = colModel[i];
        if ($.inArray(cm.name, ["cb", "rn", "subgrid"]) >=0 || cm.frozen) {
            skipIds.push("#jqgh_" + tid + "_" + $.jgrid.jqID(cm.name));
        }
    }

    $grid.jqGrid("setGridParam", {sortable: {options: {
        items: skipIds.length > 0 ? ">th:not(:has(" + skipIds.join(",") + "),:hidden)" : ">th:not(:hidden)"
    }}});

    $grid.jqGrid("sortableColumns", $($grid[0].grid.hDiv).find(".ui-jqgrid-labels"));
} catch (e) {}

请试试这个,简单的解决方案,

隐藏或删除 cellEdit: true

然后在 setFrozenColumns 的上方和下方添加以下行

前一个代码:

 $("#jqGrid2").jqGrid('setFrozenColumns');

新代码:

$("#jqGrid2").jqGrid("setGridParam", {cellEdit: false, sortable: false});
$("#jqGrid2").jqGrid('setFrozenColumns');
$("#jqGrid2").jqGrid("setGridParam", {cellEdit: true, sortable: true});