jqgrid frozenColumns +(单元格编辑和非冻结列的 sortable/reordering)
jqgrid frozenColumns + (cell Edit & sortable/reordering of non frozen columns)
请指导我使用 jqgrid 冻结一组列,其余列具有单元格编辑功能以及列重新排序/显示-隐藏选项。
谢谢。
问题是 setFrozenColumns
当前的实施有一些限制。编辑(在任何编辑模式下)和 sortable: true
不允许 冻结列 ,但 setFrozenColumns
。此外 sortable: true
不应允许使用 headers 冻结列。另一方面,setFrozenColumns
包含一些参数的简单测试(参见 here),如果设置了某些此类参数(如 cellEdit
或 sortable
),该方法将不执行任何操作。
我在 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});
请指导我使用 jqgrid 冻结一组列,其余列具有单元格编辑功能以及列重新排序/显示-隐藏选项。
谢谢。
问题是 setFrozenColumns
当前的实施有一些限制。编辑(在任何编辑模式下)和 sortable: true
不允许 冻结列 ,但 setFrozenColumns
。此外 sortable: true
不应允许使用 headers 冻结列。另一方面,setFrozenColumns
包含一些参数的简单测试(参见 here),如果设置了某些此类参数(如 cellEdit
或 sortable
),该方法将不执行任何操作。
我在 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});