javascript - 有没有更好的方法在 ng-grid 中切换进出编辑模式？

Question

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

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

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

有没有更好的方法？

解决方法

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

首先，我修改了 cellEditTemplate.html 并添加了属性 disable-Cell=\"!isEditing\"(isEditing 是来自 Controller 的范围变量，此解决方法需要它)

    $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 和 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'
        };

Answer 1

我对此进行了一些研究，据我所知，没有任何方法可以动态更改许多网格配置设置(包括编辑行为)。事实上，issue #128在 ng-grid git 存储库中让我觉得这个功能在未来也没有计划。你仍然可以 change the columns或 update the data动态但我认为这根本不会帮助你。考虑到这一点，您采用的方法或 if/switch 会很有效。

另一种选择是使用不同的编辑模式，例如“类似 Excel”的编辑模式。如果您搜索 the examples page为此有一个很好的例子。这可能是无编辑和编辑之间的健康折衷，实际上不需要对配置进行任何更改以在模式之间切换。希望对您有所帮助!