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

Question

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

Answer 1

在 imValues 数组中，有一个值和一个标签。在影响值的列定义中，这两个属性错误:

editDropdownIdLabel: 'impactValue',
editDropdownValueLabel: 'impactValue',

如果我是对的，editDropdownValueLabel 属性指示您将焦点放在单元格上时看到的内容，而 editDropdownIdLabel 属性指示所选选项的实际值。与普通的 html 标签非常相似。所以这会起作用:

editDropdownIdLabel: 'value',
editDropdownValueLabel: 'label',

如果不起作用，请使用此:

editDropdownIdLabel: 'label',
editDropdownValueLabel: 'value',