gpt4 book ai didi

javascript - AngularJS ui-grid editableCellTemplate : 'ui-grid/dropdownEditor'

转载 作者:行者123 更新时间:2023-11-28 05:42:34 27 4
gpt4 key购买 nike

我正在使用“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>

enter image description here

最佳答案

在 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com