1

「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>

ここに画像の説明を入力

4

1 に答える 1

0

imValues 配列には、値とラベルがあります。Impact 値の列定義では、次の 2 つの属性が間違っています。

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

私が正しければ、editDropdownValueLabel 属性はセルにフォーカスしたときに表示される内容を示し、editDropdownIdLabel 属性は選択したオプションの実際の値を示します。通常の html タグとほとんど同じです。したがって、これは機能します：

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

うまくいかない場合は、これを使用してください：

editDropdownIdLabel: 'label',
editDropdownValueLabel: 'value',
于 2016-08-05T21:34:46.073 に答える