有没有更好的方法可以在ng网格中切换编辑模式

Is there a better way to toggle in and out of edit mode in ng-grid?

本文关键字:网格 模式 编辑 ng 更好 方法 有没有      更新时间:2024-04-06

到目前为止,我只能通过使用单独的模板并根据一些用户输入显示正确的模板来更改ng网格中的编辑模式。

示例:Plunker(重新调整列大小,然后切换到另一种模式)

这是一个问题,因为在从模板切换到模板时,任何预先执行的列重新调整大小、排序或分组都会丢失。

有更好的方法吗?

变通办法

如果有人感兴趣,我通过修改ng-grid.js 2.0.7 为自己创建了一个变通方法

首先,我修改了cellEditTemplate.html,并添加了属性disable Cell=''"!isEditing''"(isEditing是控制器中的一个范围变量,此解决方法需要它)

    $templateCache.put("cellEditTemplate.html",
      "<div ng-cell-has-focus disable-Cell='"!isEditing'" ng-dblclick='"editCell()'">'n" +
      "'t<div ng-edit-cell-if='"!isFocused'">'t'n" +
      "'t'tDISPLAY_CELL_TEMPLATE'n" +
      "'t</div>'n" +
      "'t<div ng-edit-cell-if='"isFocused'">'n" +
      "'t'tEDITABLE_CELL_TEMPLATE'n" +
      "'t</div>'n" +
      "</div>"
    );  

然后我修改了ngCellHasFocus指令,并在disableCell属性上添加了$watch。当disableCell设置为true时,我会阻止在该指令中触发click and mousedown事件。

            return function ($scope, elm, attrs) {
                var disabled = false;
                //Added $watch
                $scope.$watch(attrs.disableCell, function (newVal) {
                    disabled = newVal;
                });
                var isFocused = false;
                var isCellEditableOnMouseDown = false;
                $scope.editCell = function () {
                    if (!$scope.enableCellEditOnFocus) {
                        setTimeout(function () {
                            focusOnInputElement($scope, elm);
                        }, 0);
                    }
                };
                elm.bind('mousedown', function (evt) {
                    //Added return
                    if (disabled) return;
                    if ($scope.enableCellEditOnFocus) {
                        isCellEditableOnMouseDown = true;
                    } else {
                        elm.focus();
                    }
                    return true;
                });
                elm.bind('click', function (evt) {
                    //Added return
                    if (disabled) return;
                    if ($scope.enableCellEditOnFocus) {
                        evt.preventDefault();
                        isCellEditableOnMouseDown = false;
                        focusOnInputElement($scope, elm);
                    }
                });
                elm.bind('focus', function (evt) {
                    isFocused = true;
                    if ($scope.enableCellEditOnFocus && !isCellEditableOnMouseDown) {
                        focusOnInputElement($scope, elm);
                    }
                    return true;
                });
                elm.bind('blur', function () {
                    isFocused = false;
                    return true;
                });
                elm.bind('keydown', function (evt) {
                    if (!$scope.enableCellEditOnFocus) {
                        if (isFocused && evt.keyCode !== 37 && evt.keyCode !== 38 && evt.keyCode !== 39 && evt.keyCode !== 40 &&    evt.keyCode !== 9 && !evt.shiftKey && evt.keyCode !== 13) {
                            focusOnInputElement($scope, elm);
                        }
                        if (isFocused && evt.shiftKey && (evt.keyCode >= 65 && evt.keyCode <= 90)) {
                            focusOnInputElement($scope, elm);
                        }
                        if (evt.keyCode === 27) {
                            elm.focus();
                        }
                    }
                    return true;
                });
            };
        }]);

这是我的网格选项

        $scope.gridOptions = {
            data: 'myData',
            enableColumnResize: true,
            enableCellSelection: true,
            enableRowSelection: true,
            enableCellEditOnFocus: true,
            columnDefs: 'columnDefs',
            plugins: [layoutPlugin],
            //My row template has a ng-dblClick() attached to it for navigation in non-edit mode
            rowTemplate: 'Templates/gridRowView.html'
        };

我对此进行了一些研究,从中可以看出,没有任何方法可以动态更改许多网格配置设置(包括编辑行为)。事实上,ng网格git存储库中的问题#128让我认为这个功能在未来也没有计划。您仍然可以动态更改列或更新数据,但我认为这对您没有任何帮助。考虑到这一点,你所采取的方法或if/开关会很好地工作。

另一种选择是使用不同的编辑模式,如"类似Excel"的编辑模式。如果你在示例页面上搜索这个,就会发现一个很好的示例。这可能是在不进行编辑和编辑之间的一种健康折衷,而不需要对配置进行任何更改即可在模式之间切换。我希望这能有所帮助!

我找不到任何简单的决定,通过这种方式解决了问题:您可以将字符串指定给网格的columnDefs选项。完成此任务后,您可以更改列Defs,网格可以看到这些更改。在列中,您可以更改enableCellEdit。

$scope.columnDefs = [{ field:"name", displayName: "NAME", enableCellEdit: true},
                     { field:"age", displayName: "AGE", enableCellEdit: true}];

var options = { data: 'myData',
                columnDefs: 'columnDefs',
                multiSelect: false,
                enableCellEditOnFocus: true};

$scope.gridOptions = options;
$scope.makeReadOnly = function() {
    for(i in $scope.columnDefs)
      $scope.columnDefs[i].enableCellEdit = false;
}

plunker中的代码:http://plnkr.co/edit/3Xoao5?p=info

看完这个答案后,我做出了决定:https://stackoverflow.com/a/18405872/488848