为动态生成的 angular ui-grid 设置列宽

Question

我正在尝试为我的网格设置列宽。

我从 api 调用中获取数据，并稍微重建它以显示在网格中。这样可行。我永远不知道我的网格中会有多少列，这就是为什么我将 $scope.gridOptions.columnDef 定义为空数组的原因，在这种情况下，当网格获取数据时，它会动态呈现列，但在这种情况下如何设置列宽？

代码：

 $scope.gridOptions = {
            enableGridMenu: false,
            paginationPageSizes: [10, 25, 50],
            paginationPageSize: 10,

            enableFiltering: false,
            rowHeight: 40,
            // selection
            enableRowSelection: true,
            enableRowHeaderSelection: false,
            multiSelect: false,
            modifierKeysToMultiSelect: false,
            noUnselect: true,
            columnDefs: [],
            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
            }

        };

        $scope.gridOptions.columnDefs = [];

        $scope.$watch('filter', function (newVal, oldVal) {

            var array = [];

            if (typeof newVal !== 'undefined') {
                param.query = newVal;

                lovServices.events(param)
                    .then(function (response) {

                        var events = response.events;

                        angular.forEach(events, function (field) {

                            var custom = field.eventProperties;

                            var tempObj = {};

                            tempObj.title = field.title;
                            tempObj.description = field.description;
                            tempObj.studyName = field.studyName;

                            for (var i = 0; i < custom.length; i++){

                                tempObj[custom[i].name] = custom[i].value
                            }

                            array.push(tempObj);
                        });

                        $scope.gridOptions.data = array;

                        for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) {
                            $scope.gridOptions.columnDefs[i].width = '*';
                        }

                        $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
                        $scope.gridApi.core.refresh()

                    })
            }
        });

如您所见，代码清晰，控制台没有错误，我的宽度定义不起作用。

那我错过了什么？感谢您的帮助。

Answer 1

尝试将 width 属性设置为普通 Number 或 Percentage 值。示例：50 或“50%”；

Answer 2

所以我在初始化数据后检查了控制台 $scope.gridOptions.columnsDef。它一直是一个空数组，所以我在 init 之后设置了间隔，它终于起作用了！

我的代码如下：

  $scope.gridOptions.data = array;

                    $interval(function () {
                        for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) {
                            $scope.gridOptions.columnDefs[i].width = '20%';

                        }

                        $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
                        $scope.gridApi.core.refresh()
                    })

css 滚动：

#cp-grid .ui-grid-render-container-body .ui-grid-viewport {
    overflow-x: scroll !important;
}

为动态生成的 angular ui-grid 设置列宽

Set columns width for dynamically generated angular ui-grid

javascript

angularjs

angular-ui-grid