Question

我有一个包含多个列的ui-grid。其中两列是可编辑的。我还启用了行选择，这使得复选框显示在行的最左侧列中。

我已禁用不可编辑列的单元格焦点。我想要实现的是当我编辑其中一个可编辑列单元格和命中选项卡时，它应该只在可编辑列之间导航。当前设置的问题是焦点从一行中的可编辑单元格转移到下一行中的选择复选框，而不是转到下一个可编辑单元格。我想禁用选择复选框的焦点。

    vm.tableOptions = {
        appScopeProvider: vm,
        data: [],
        enableSorting: true,
        enableFiltering: true,
        enableRowSelection: true,
        enableColumnResizing: true,
        enableSelectAll: true,
        multiSelect: true,
        enableGridMenu: true,
        virtualizationThreshold: 18,
        fastWatch: true,
        scrollDebounce: 500,
        wheelScrollThrottle: 500,
        rowHeight: 40,
        headerRowHeight: 40,
        minRowsToShow: 15,
        paginationPageSize: 25,
        paginationPageSizes: [],
        treeRowHeaderAlwaysVisible: false,
        saveScroll: true,
        saveGroupingExpandedStates: true,
        enableCellEditOnFocus: true,

        onRegisterApi: function (gridApi) {
            vm.gridApi = gridApi;

            /**
            * Checks if any rows are selected in the tasks grid.
            * @returns True if any tasks are selected; otherwise, false.
            */
            function anyRowsSelected() {
                var selectedRows = vm.gridApi.selection.getSelectedRows();
                return selectedRows ? selectedRows.length > 0 : false;
            };

            // Check if any tasks are selected when the selection changes
            gridApi.selection.on.rowSelectionChanged(null, function (row) {
                vm.isRowsSelected = anyRowsSelected();
            });

            // Check if any tasks are selected when batch selection changes
            gridApi.selection.on.rowSelectionChangedBatch(null, function (rows) {
                vm.isRowsSelected = anyRowsSelected();
            });

            // This is a hack to manually move the focus to next editable cell
            // I want to avoid this since this is causing some issues.
            gridApi.cellNav.on.navigate($scope, function (newRowCol, oldRowCol) {
                var assetColIndex = 4;
                if (newRowCol.col.name === "selectionRowHeaderCol" &&
                    oldRowCol.col.name === "SerialNumber") {
                        vm.gridApi.cellNav.scrollToFocus(newRowCol.row.entity, vm.tableOptions.columnDefs[assetColIndex]);
                }
            });

            $timeout(vm.restoreGridState, 50);
        },
        columnDefs: [
            { name: "DiscreteSkuId", enableCellEdit: false, allowCellFocus: false },
            {
                 name: "SlotBin", 
                 cellTemplate: slotBinCellTemplate, 
                 enableCellEdit: false, 
                 allowCellFocus: false,
                 sort: {
                    direction: 'desc',
                    priority: 0
                }
            },
            { name: "Model", enableCellEdit: false, allowCellFocus: false },
            { name: "AssetType", enableCellEdit: false, allowCellFocus: false },
            { name: "AssetTag" , cellTemplate: editableCellTemplate, cellEditableCondition: allowTableEdit },
            { name: "SerialNumber" , cellTemplate: editableCellTemplate, cellEditableCondition: allowTableEdit },
            { name: "ValidationFailureReasons", cellTemplate: errorMessageCellTemplate, enableCellEdit: false, allowCellFocus: false }
        ]
    };

这是在html页面中。

<div id="table" ui-grid="rackItemDetailsCtrl.tableOptions" ng-disabled="rackItemDetailsCtrl.disableUserInteraction" class="grid tasks-table ui-grid-row-hover" ui-grid-save-state ui-grid-resize-columns ui-grid-selection ui-grid-grouping ui-grid-move-columns ui-grid-auto-resize ui-grid-scrolling-fix ui-grid-edit ui-grid-cellNav></div>

Angular ui-grid version：3.1.0.1

Angularjs版本：1.4.9

Answer 1

您可以使用 allowCellFocus 标记禁用列上的单元格焦点。但是，行选择列会自动创建，您无法设置此标志。创建列后手动访问列的解决方案，并将 allowCellFocus 设置为false。以下是如何做到这一点：

gridApi.grid.getColumn('selectionRowHeaderCol').colDef.allowCellFocus = false;

Angular ui-grid禁用行选择复选框的单元格焦点

1 个答案: