- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用“ui-grid - v3.2.6”
我有一个包含 6 列的网格,其中 2 列(“影响值”和“有效开始日期”)是可编辑的。
“影响值”正在使用 editableCellTemplate:“ui-grid/dropdownEditor”
数据在网格中正确显示。但是,当我双击任何可编辑列时。我看到奇怪的行为,请查看屏幕截图。我想知道我做错了什么,当我双击该列时没有看到下拉菜单。
我点击了 ui-grid 教程链接
angular.module('impactMatrixModule')
.controller("impactMatrixController", ["$scope", "$http", "$rootScope", "uiGridConstants", function ($scope, $http, $rootScope,uiGridConstants) {
$scope.myExternalScope=$scope;
var distTypes = [
{ value: 'National Broadcast', label: 'National Broadcast' },
{ value: 'Local Broadcast', label: 'Local Broadcast'},
{ value: 'National Cable', label: 'National Cable'},
{ value: 'National Cable SplitNet', label: 'National Cable SplitNet'},
{ value: 'Local Cable Originator', label: 'Local Cable Originator'},
{ value: 'Regional Cable', label: 'Regional Cable'},
{ value: 'National Broadcast-Pioneer', label: 'National Broadcast-Pioneer'},
{ value: 'Special Event', label: 'Special Event'},
{ value: 'All Other Request', label: 'All Other Request'}
];
var imValues = [
{ value: 'Y', label: 'Y' },
{ value: 'N', label: 'N'},
{ value: 'I', label: 'I'},
{ value: 'Y/T', label: 'Y/T'}
];
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableColumnMenus: false,
enableCellEditOnFocus: true,
flatEntityAccess: true,
fastWatch: true,
minRowsToShow: 20,
paginationPageSizes: [20, 50, 100, 500, 1000],
paginationPageSize: 50,
columnDefs: [
{
field: 'distributorDesc',
displayName: 'Distributor Type',
enableCellEdit: false,
filter: {
selectOptions: distTypes,
type: uiGridConstants.filter.SELECT,
condition: uiGridConstants.filter.EXACT
}
},
{
field: 'functionalArea' ,
displayName: 'Functional Area',
enableCellEdit: false
},
{
field: 'applicationName',
displayName: 'Application Name',
enableCellEdit: false
},
{
field: 'changeType',
displayName: 'Change Type',
enableCellEdit: false
},
{
field: 'impactValue',
displayName: 'Impact Value',
width: '10%',
enableFiltering: false,
enableCellEdit: true,
editType: 'dropdown',
editDropdownOptionsArray: imValues,
editDropdownIdLabel: 'impactValue',
editDropdownValueLabel: 'impactValue',
editableCellTemplate: 'ui-grid/dropdownEditor'
},
{
field: 'effStartDate',
displayName: 'Effective Start Date',
width: '10%',
enableFiltering: false,
type: 'date',
cellFilter: 'date:"yyyy-MM-dd"'
}
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
$http.get("/CRST/impactMatrix/distType/all")
.then(function (evt) {
console.log(evt.data.length)
$scope.gridOptions.data = evt.data;
}, function () {
console.log("error occured while getting the response from Web service")
})
}]);
<div class="row primaryContainer margin-top15">
<div id="grid1" ui-grid="gridOptions" ui-grid-pagination ui-grid-edit
ui-grid-resize-columns class="grid" ></div>
</div>
最佳答案
在 imValues 数组中,有一个值和一个标签。在影响值的列定义中,这两个属性错误:
editDropdownIdLabel: 'impactValue',
editDropdownValueLabel: 'impactValue',
如果我是对的,editDropdownValueLabel 属性指示您将焦点放在单元格上时看到的内容,而 editDropdownIdLabel 属性指示所选选项的实际值。与普通的 html 标签非常相似。所以这会起作用:
editDropdownIdLabel: 'value',
editDropdownValueLabel: 'label',
如果不起作用,请使用此:
editDropdownIdLabel: 'label',
editDropdownValueLabel: 'value',
关于javascript - AngularJS ui-grid editableCellTemplate : 'ui-grid/dropdownEditor' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38797734/
我想在 ui-grid 的其中一列中输入类型为 number 的 ng-input。理想情况下它看起来像这样: 我通过使用常规 cellTemplate 来完成此操作,但据我所知,正确的方法是使用 e
我在 editableCellTemplate 中有一个自定义指令,每当我选择文本时,单元格就会被选中,当我按“F2”或双击此单元格时,它会显示自定义指令,但文本字段指令内部没有获得焦点。 如何将焦点
在 Firefox 中,我们有一个 editableCellTemplate: 用户第一次点击时,允许他修改单元格。任何后续尝试都不会进入编辑模式。我们目前使用的是 2.0.7 版本的网格。但是,它
在最新版本的 ng-grid(v2.0.7) 中,当一个 editableCellTemplate 处于编辑模式并且失去焦点时,它仍然处于编辑模式。这是错误还是我错误地配置了网格? 这是一个例子:ht
我正在使用“ui-grid - v3.2.6” 我有一个包含 6 列的网格,其中 2 列(“影响值”和“有效开始日期”)是可编辑的。 “影响值”正在使用 editableCellTemplate:“u
这是 this question 的轻微延续. 我正在使用 ng-grids 新版本 ui-grid并且我对 editableCellTemplate 有疑问。我我正在使用模板显示使用 ng-opti
我正在使用 ng-grid 的新 3.0 版本 ui-grid 在我的应用程序中制作网格。我想要做的是将我表格中的一个可编辑单元格设为 ng-options下拉列表中填充了使用 Angular 工厂检
我是一名优秀的程序员,十分优秀!