Angularjs 角度ui网格禁用行选择的单元格焦点复选框
我有一个包含多个列的ui网格。其中两列是可编辑的。我还启用了行选择,使复选框显示在行的最左边的列中 我已禁用不可编辑列的单元格焦点。我想要实现的是,当我编辑一个可编辑列单元格并点击tab时,它应该只在可编辑列之间导航。当前设置的问题是焦点从一行中的可编辑单元格转移到下一行中的选择复选框,而不是转移到下一个可编辑单元格。我想禁用选择复选框的焦点Angularjs 角度ui网格禁用行选择的单元格焦点复选框,angularjs,angular-ui-grid,ui-grid,Angularjs,Angular Ui Grid,Ui Grid,我有一个包含多个列的ui网格。其中两列是可编辑的。我还启用了行选择,使复选框显示在行的最左边的列中 我已禁用不可编辑列的单元格焦点。我想要实现的是,当我编辑一个可编辑列单元格并点击tab时,它应该只在可编辑列之间导航。当前设置的问题是焦点从一行中的可编辑单元格转移到下一行中的选择复选框,而不是转移到下一个可编辑单元格。我想禁用选择复选框的焦点 vm.tableOptions = { appScopeProvider: vm, data: [],
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>
角度ui网格版本:3.1.0.1
Angularjs版本:1.4.9您可以使用allowCellFocus标志禁用列上的单元格焦点。但是,行选择列是自动创建的,您无法设置此标志。解决方案是在创建列并将allowCellFocus设置为false后手动访问该列。以下是如何做到这一点:
gridApi.grid.getColumn('selectionRowHeaderCol').colDef.allowCellFocus = false;
嗨,你提到一个黑客制造了一个问题。您使用scrollToFocus跳转到的字段是否不可编辑?如果是这样,我有一个解决办法。让我知道…。@S.Baggy这不是问题所在。问题是有时焦点会跳到下一行而不是同一行。你见过这样的吗?不错!我在这方面遇到了一点问题,因为api一出现该列就不可用,所以我等待第一个gridApi.core.on.rowsRendered事件并将其放在那里。