AngularJS UI格editableCellTemplate：「UI網/ dropdownEditor」

我使用「UI網 - v3.2.6」AngularJS UI格editableCellTemplate：「UI網/ dropdownEditor」

我有6列的網格，並指出，2列（'衝擊值'和'有效開始日期'）是可編輯的。

'衝擊值' 使用editableCellTemplate： 'UI柵/ dropdownEditor'

數據在網格中正確顯示。但是，當我雙擊任何可編輯的列。我看到奇怪的行爲，請看屏幕截圖。我想知道我做錯了什麼，我沒有看到下拉列表，當我雙擊該列。

我跟着UI網教程鏈接

angular.module('impactMatrixModule') 
 
    .controller("impactMatrixController", ["$scope", "$http", "$rootScope", "uiGridConstants", function ($scope, $http, $rootScope,uiGridConstants) { 
 
     $scope.myExternalScope=$scope; 
 
     
 
    \t var distTypes = [ 
 
    \t     { value: 'National Broadcast', label: 'National Broadcast' }, 
 
    \t     { value: 'Local Broadcast', label: 'Local Broadcast'}, 
 
    \t     { value: 'National Cable', label: 'National Cable'}, 
 
    \t     { value: 'National Cable SplitNet', label: 'National Cable SplitNet'}, 
 
    \t     { value: 'Local Cable Originator', label: 'Local Cable Originator'}, 
 
    \t     { value: 'Regional Cable', label: 'Regional Cable'}, 
 
    \t     { value: 'National Broadcast-Pioneer', label: 'National Broadcast-Pioneer'}, 
 
    \t     { value: 'Special Event', label: 'Special Event'}, 
 
    \t     { value: 'All Other Request', label: 'All Other Request'} 
 
    \t     ]; 
 
    \t 
 
    \t var imValues = [ 
 
\t \t     { value: 'Y', label: 'Y' }, 
 
\t \t     { value: 'N', label: 'N'}, 
 
\t \t     { value: 'I', label: 'I'}, 
 
\t \t     { value: 'Y/T', label: 'Y/T'} 
 
\t \t     ]; 
 
    \t 
 
    \t $scope.gridOptions = { 
 
    \t \t  enableSorting: true, 
 
    \t \t  enableFiltering: true, 
 
    \t \t  enableColumnMenus: false,  \t 
 
    \t \t  enableCellEditOnFocus: true, 
 
    \t \t  flatEntityAccess: true, 
 
    \t \t  fastWatch: true, 
 
    \t \t  minRowsToShow: 20, 
 
    \t \t  paginationPageSizes: [20, 50, 100, 500, 1000], 
 
    \t \t  paginationPageSize: 50, 
 

 
    \t \t  columnDefs: [ 
 
    \t \t  { 
 
    \t \t  \t field: 'distributorDesc', 
 
    \t \t  \t displayName: 'Distributor Type', 
 
    \t \t  \t enableCellEdit: false, 
 
    \t \t  \t filter: { 
 
\t \t  \t \t  \t \t selectOptions: distTypes, 
 
\t \t  \t \t  \t \t type: uiGridConstants.filter.SELECT, 
 
\t \t  \t \t  \t \t condition: uiGridConstants.filter.EXACT 
 
\t  \t \t  \t \t } 
 
    \t \t  }, 
 
    \t \t  { 
 
    \t \t  \t field: 'functionalArea' , 
 
    \t \t  \t displayName: 'Functional Area', 
 
    \t \t  \t enableCellEdit: false 
 
    \t \t  }, 
 
    \t \t  { 
 
    \t \t  \t field: 'applicationName', 
 
    \t \t  \t displayName: 'Application Name', 
 
    \t \t  \t enableCellEdit: false 
 
    \t \t  }, 
 
    \t \t  { 
 
    \t \t  \t field: 'changeType', 
 
    \t \t  \t displayName: 'Change Type', 
 
    \t \t  \t enableCellEdit: false 
 
    \t \t  }, 
 
    \t \t  { 
 
    \t \t  \t field: 'impactValue', 
 
    \t \t  \t displayName: 'Impact Value', 
 
    \t \t  \t width: '10%', 
 
    \t \t  \t enableFiltering: false, 
 
    \t \t  \t enableCellEdit: true, 
 
    \t \t  \t editType: 'dropdown', 
 
    \t \t  \t editDropdownOptionsArray: imValues, 
 
    \t \t  \t editDropdownIdLabel: 'impactValue', 
 
    \t \t  \t editDropdownValueLabel: 'impactValue', 
 
    \t \t   editableCellTemplate: 'ui-grid/dropdownEditor' 
 
    \t \t  }, 
 
    \t \t  { 
 
    \t \t  \t field: 'effStartDate', 
 
    \t \t  \t displayName: 'Effective Start Date', 
 
    \t \t  \t width: '10%', 
 
    \t \t   enableFiltering: false, 
 
    \t \t   type: 'date', 
 
         cellFilter: 'date:"yyyy-MM-dd"' 
 
    \t \t   } 
 
    \t \t  ], 
 
    \t \t  onRegisterApi: function(gridApi) { 
 
    \t \t  $scope.grid1Api = gridApi; 
 
    \t \t  } 
 
    \t \t }; 
 
    \t 
 
      $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"> 
 
\t <div id="grid1" ui-grid="gridOptions" ui-grid-pagination ui-grid-edit 
 
\t \t ui-grid-resize-columns class="grid" ></div> 
 
</div>

enter image description here

來源

2016-08-05 KB.

在imValues陣列，你有一個值和標籤。在衝擊值的列定義你有這兩個屬性錯誤：

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

如果我是正確的，editDropdownValueLabel屬性表明你所看到的，當你專注於電池，而editDropdownIdLabel屬性指示的實際值選定的選項。非常像普通的html標籤。所以這將工作：

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

如果它不工作，使用：

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

來源

2016-08-05 21:34:46

喜馬哈茂德，我想你的suggestions.unfortunately，它沒有工作。儘管感謝您的回覆。 –

有沒有人知道我做錯了上面的代碼？有什麼建議麼？ –

它應該根據ui-grid文檔工作。嘗試editDropdownOptionsFunction。 editDropdownOptionsFunction：function（rowEntity，colDef）var s = []; （var v在imValues中） s.push return s; } –

AngularJS UI格editableCellTemplate：「UI網/ dropdownEditor」

回答

相關問題