AngularJS动态向UI-Grid添加列

Question

你好，我正在开发一个AngularJS应用程序，其中我正在使用Angular UI-Grid来显示从MVC控制器传来的数据。但是，在将数据绑定到UI-Grid后，我想动态地向网格添加具有每行按钮的额外列。我不知道该如何实现。任何帮助都将不胜感激。

代码：这里的columnDefs将绑定到调用MVC控制器操作并绑定响应的http服务方法。我现在想添加新列。每一行都会有按钮。是否有办法将数组绑定到columnDefs的字段：

    $scope.gridOptions = {
            enableColumnsResize: true,
            enableSorting: false,
            enableFiltering: false,
            autoResize: true,
            enableFocusedCellEdit: true,
            enableCellSelection: true,
            enableCellEditOnFocus: true,
            enableColumnMenus: false,
            columnDefs: [

            ],
            data:$scope.swap,
            onRegisterApi: function (gridApi) {
                $scope.grid1Api = gridApi;
            }

        };
$http.get('/Default1/GetJsonData')
            .success(function (result) {
                $scope.swap = result;
                $scope.gridOptions.push({name:'newcol',filter:'newcolarray'})

                $scope.gridOptions.data = $scope.swap;
                console.log(result);
            })
            .error(function (data) {
                console.log(data);
            });

- swapnil

---

你好，你找到解决方法了吗？我也遇到了同样的问题。推送解决方案还会覆盖其他列，只显示“newCol”。 - Emad

Answer 1

在你的success()处理程序中，你应该能够做到以下几点

$scope.gridOptions.columnDefs.push({name: 'newCol', displayName: 'My new col'});

接着，每列都需要这样一次调用，在设置$scope.gridOptions.data之前

- S. Baggy

---

我有一个关于这个的疑问。它会覆盖ui-grid吗？只显示“newcol”，而不是将新列附加到现有的ui-grid中。你能告诉我吗？ - swapnil

嗨，S.Baggy，我试过了...但它覆盖了ui-grid中现有的列，只显示了新的一列。 - swapnil

你能把你用来添加列的代码粘贴进来吗？ - S. Baggy

我已经复制了代码，但需求略有变化。是否可以将数组绑定到columnDefs的字段中？我有一组日期，并将其绑定到字段，以便为每个日期创建列。我对代码进行了一些更改。 - swapnil

很难弄清楚这个问题。在类似的情况下，push()调用对我有效。你能否创建一个Plunker或编辑您的原始帖子以显示创建这些其他列的代码？ - S. Baggy