动态地在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

回答

相关问题