動態地在UI網格中填充Dropdownlist

我花了很多時間找到一個解決方案，但沒有成功，每次我找到一個解決方案，它結束了靜態數據不是從任何Web API或數據庫。我想要在UI網格中的下拉列表中填充動態數據。我讀過一篇博客，其中有人說我們必須使用動態數據editDropdownRowEntityOptionsArrayPath但我沒有找到任何有用的解決方案。任何人都可以提供任何有用的信息，但我會感謝不同。提前致謝。這是我所做的。動態地在UI網格中填充Dropdownlist

   $scope.listOptions = []; $scope.ddlist = []; 
     $http.get('http://localhost:26413/api/MenuVDN/GetVDNList') 
     .then(function (data) { 
      $scope.listOptions = data; 
      $scope.ddlist = $scope.listOptions.data.Table; 
      console.log($scope.ddlist); 
     }) 
     $scope.gridOptions = { 
      enableColumnResizing: true, 
      enableSorting: true, 
      enableCellSelection: true, 
      canSelectRows: true, 
     // enableCellEdit: true, 
      columnDefs: [ 
      { field: 'NameEn', displayName: ' Menu Name', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'asc' }, width: '25%' }, 
      { field: 'id', displayName: 'ID' }, 
      { field: 'language', displayName: 'VDN Language', grouping: { groupPriority: 1 }, sort: { priority: 1, direction: 'asc' } }, 
      { field: 'vdnname', displayName: 'VDN Name' }, 
      { 
       field: 'vdnnum', displayName: 'VDN Number', 
       editableCellTemplate: 'ui-grid/dropdownEditor', 
       // editDropdownIdLabel: 'id', 
       editDropdownValueLabel: 'value', 
      // enableFocusedCellEdit: true, 
       enableCellEditOnFocus :true, 
       enableCellEdit: true, 
       editType: 'dropdown', 
       editDropdownRowEntityOptionsArrayPath : $scope.ddlist 
    //    , cellEditableCondition: function($scope) { return true; } 
      } 
      ] 
     };

加我從這個json格式的webapi得到響應。

{"Table":[{"id":2,"value":"AR-BOOKING-NEW (7101)"}, 
{"id":3,"value":"EN-BOOKIN-NEW (7102)"}, 
{"id":4,"value":"AR-BOOKING-CANCEL (7103)"}, 
{"id":5,"value":"EN-BOOKING-CANCEL (7104)"}, 
{"id":6,"value":"AR-BOOKING-MODIFY (7105)"}]}

來源

2017-06-12 Waqar Ahmed Somra

$scope.columns = completedFiles.columns; 
    $scope.rows = completedFiles.rows; 
    //prepare custom column for ui-grid 
    var customColumns = []; 

angular.forEach($scope.columns, function(column) { 
      customColumns.push({ 
       field : column.fieldName, 
       displayName : column.displayName, 
       editable : column.editable, 
       dataType : column.dataType,     
      }); 
     } 
}); 

angular.forEach(customColumns, function(customColumn) { 
     customColumn['width'] = 200; 
     if (customColumn.dataType === 'dropDown') { 
      customColumn['cellTemplate'] = "<div class='ui-grid-cell-contents' id='col-description'><select class="form-control" data-ng-options="item in grid.appScope.arrayName track by item" ><option value="" selected hidden />/></select></div>"; 
      customColumn['width'] = 180; 
     } 
    });

你可以像上面那只是在分配$ scope.gridOptions customColumns到columnDefs而不是定義有列定義後創建自定義模板。

來源

2017-06-13 12:15:07

動態地在UI網格中填充Dropdownlist

回答

相關問題