在 ui 网格中动态填充下拉列表

Question

我花了很多时间寻找解决方案，但每次我找到解决方案都没有成功，它最终得到的是静态数据，而不是来自任何网络 API 或数据库。我希望在 UI 网格的下拉列表中填充动态数据。我在一篇博客中读到有人说动态数据我们必须使用 editDropdownRowEntityOptionsArrayPath 但我没有找到任何有用的解决方案。任何人都可以提供任何有用的信息，我将不胜感激。提前致谢。这就是我所做的。

             $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)"}]}

Answer 1

    $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，而不是在那里定义列定义。

在 ui 网格中动态填充下拉列表

populate Dropdownlist in ui grid dynamically

angularjs

ui-grid