angularjs - 在 AngularJS UI-grid 中使用 typeahead 和 cellNav
问题描述
我定义了一个 Angular-UI 网格ui-grid-cellNav
,允许在单击时编辑单元格,以及一个自定义模板,用于在特定列之前显示 Angular-UI Bootstrap 类型,如下所示:
索引.html:
<head>
<script type="text/ng-template" id="TypeaheadTemplate.html">
<div style="height:100%">
<input ng-class="'colt' + col.uid" type="text" class="typeahead form-control" ng-model="MODEL_COL_FIELD"
uib-typeahead="name as item.name for item in grid.appScope.items | filter:$viewValue"
typeahead-editable="false"
typeahead-on-select="grid.appScope.typeaheadSelected(row.entity, $item)"></input>
</div>
</script>
</head>
<body ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav></div>
</body>
控制器.js
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
id: 1,
name: "Item 1",
description: "Example Item #1"
},
{
id: 2,
name: "Item 2",
description: "Example Item #2"
}];
$scope.data = [{}, {}, {}]
$scope.columns = [
{
displayName: "Item",
field: "item.name",
editableCellTemplate: "TypeaheadTemplate.html",
cellTemplate: "TypeaheadTemplate.html",
enableCellEdit: true,
enableCellEditOnFocus: true
},
{
displayName: "Note",
name: "activityId",
enableCellEdit: true,
enableCellEditOnFocus: true
}]
$scope.gridOptions = {
data: $scope.data,
enableRowSelection: false,
showColumnFooter: true,
multiSelect: false,
enableSorting: false,
enableFiltering: false,
gridMenuShowHideColumns: false,
enableColumnMenus: false,
enableCellEditOnFocus: true,
minRowsToShow: 4,
columnDefs: $scope.columns
};
$scope.typeaheadSelected = function(entity, selectedItem) {
entity.item = selectedItem;
}
});
这工作得很好,ui-grid-cellNav
允许在 Notes 列上单击编辑,并在 Items 列中进行预输入功能。但是,最初单击网格中的预输入文本框会使文本框模糊,直到再次单击它,并且保持 Notes 中的单元格处于选中状态(但不可编辑)通常会阻止文本框被选中。因此,虽然它是功能性的,但它存在一些可用性问题。
我已经尝试通过使用ng-class
属性手动将类应用于文本框,认为有一些幕后逻辑将元素集中在这个类上,但无济于事。我在 API 文档中也找不到任何建议能够覆盖给定列的 cellNav 行为的内容。删除ui-grid-cellNav
指令修复了预先输入的焦点,但也破坏了单击编辑。
有什么方法可以让 Angular-UI 网格中的预输入与 Angular-UI 网格配合得很好ui-grid-cellNav
?
解决方案
您可以为任何带有预先输入的列设置allowCellFocus
为false
,这将确保最初ui-grid-cellNav
不会将焦点从预先输入的文本框上移开。需要注意的一个问题是,当 cellNav 单元格已经具有焦点时,预输入文本框仍需要单击两次,这会弄乱网格其余部分的制表符索引。
$scope.columns = [
{
displayName: "Item",
field: "item.name",
allowCellFocus: false, // Property added here
editableCellTemplate: "TypeaheadTemplate.html",
cellTemplate: "TypeaheadTemplate.html",
enableCellEdit: true,
enableCellEditOnFocus: true
},
// ...
];
如果可能,您应该考虑使用ui-select
下拉菜单代替预先输入。这些在带有 cellNav 的网格中表现得更加可靠,但是您仍然需要考虑混乱的选项卡索引行为。
推荐阅读
- java - 将 Excel 中的每个单元格数据转换为 XML 以存储到 DB
- java - 在java中动态设置类实例变量
- javascript - 使用 https.request 在 nodejs 中发送表单数据
- svn - 使用 SmartSVN 从 subversion 自动更新
- android - 需要 Android MVVM 示例架构项目
- php - MAILER ERROR: 无法实例化邮件功能,PHP 邮件程序
- android - Android 应用程序在某些设备上正常运行,某些设备应用程序崩溃
- android - 如何在Android中实现多按钮点击事件
- javascript - 如何在使用时刻 js 进行时区转换后比较 javascript 中的时间跨度
- java - 互联网关闭时地图未加载android native / java