Question

这是我第一次使用ui-grid而且我发现API有点受限制。

我正在使用编辑和cellnav。我打开了焦点编辑，因此只需单击一下即可将单元格切换到编辑模式。当我点击例如在网格外部，编辑在模糊时关闭，但单元格保持选中状态。这样做的问题是，在选定的单元格中，单击一次不会将单元格置于编辑模式。

所以，我正在寻找：

a）在编辑关闭时取消选择单元格的方法，或者： b）单击所选单元格以将其切换到编辑模式的方法。

搜索API和教程文档还没有找到办法。

由于

编辑：由于我找不到其他办法，我写了这个可怕的指令，我敦促你不要复制和使用你自己的项目。我希望有人会以较少的厌恶和脆弱的建议回复，但现在这就是我的全部。

(function () {
    angular.module('eventApp').directive('autoEdit', function () {
        return function (scope, element, attrs) {
            function doubleClick() {
                $(this, '.ui-grid-cell-focus').dblclick();
            }
            $(element).on('blur', '.ui-grid-cell-focus ~ div input', function () {
                $(this).closest('div').parent().children('.ui-grid-cell-focus').unbind('click', doubleClick).click(doubleClick);
            });
        }
    });
})();

Answer 1

我认为你可以尝试使用这种“未记录的”功能：

gridApi.grid.cellNav.clearFocus();
gridApi.grid.cellNav.lastRowCol = null;

Answer 2

这是我的解决方案，使用装饰器将工作clearFocus方法公开到cellNav API上。

angular.module(...)
.config(
    $provide => {
        $provide.decorator('uiGridCellnavDirective', $delegate => {
            const {compile} = $delegate[0];
            $delegate[0].compile = () => {
                const compilation = compile(), {pre} = compilation;
                compilation.pre = ($scope, $elm, $attrs, uiGridCtrl) => {
                    const result = pre($scope, $elm, $attrs, uiGridCtrl);
                    uiGridCtrl.grid.api.cellNav.clearFocus = () => {
                        uiGridCtrl.grid.cellNav.lastRowCol = null;
                        uiGridCtrl.cellNav.clearFocus();
                    };
                    return result;
                };
                return compilation;
            }
            return $delegate;
        });
    }
)

Answer 3

扩展@Vlad回答

gridApi.grid.cellNav.clearFocus();
gridApi.grid.cellNav.lastRowCol = null;
gridApi.grid.columns[0].colDef.allowCellFocus = false;

[修复由于修复而清除第一列选择的问题]

在ui-grid中取消选择带有cellNav的单元格

3 个答案: