角度js中的ui网格列对齐问题

Question

在我的应用程序的ui网格中有很多列。但是，当我尝试将它们全部显示在我的网格列上时：

标题不在那里，但有些值是如何存在的，这是一个很大的问题。

我有的网格选项是......

this.getGridOption = function (uiScrollOption, BestIndicatorParam, paginationPageSize, enableRowSelection, enableRowHeaderSelection,
    enableSelectAll, enableColumnResize, enableGridMenu, enableFiltering) {


    return {
        enableRowSelection: typeof enableRowSelection !== 'undefined' ? enableRowSelection : false,
        enableRowHeaderSelection: typeof enableRowHeaderSelection !== 'undefined' ? enableRowHeaderSelection : false,
        enableFiltering: typeof enableFiltering !== 'undefined' ? enableFiltering : false,
        enableSelectAll: typeof enableSelectAll !== 'undefined' ? enableSelectAll : false,
        enableColumnResize: typeof enableColumnResize !== 'undefined' ? enableColumnResize : true,
        rowHeight: 55,
        paginationPageSize: typeof paginationPageSize !== 'undefined' ? paginationPageSize : 5,
        paginationPageSizes: [5, 10],
        enablePaginationControls: false,
        enableVerticalScrollbar: 0,
        //enableHorizontalScrollbar: typeof uiScrollOption !== 'undefined' ? uiScrollOption : 0,
        enableHorizontalScrollbar:1,
        enableGridMenu: typeof enableGridMenu !== 'undefined' ? enableGridMenu : true,
        showGridFooter: false,
        columnDefs: this.columnDef,
        data: ''
    }
};

当我显示4-5列时，它很好，但是当我向他们展示这一切时，这个问题很烦人。需要做什么。请帮忙。

另外我需要启用水平滚动条。那也没有用。

我试图给uiGridConstants.scrollbars.ALWAYS。

但没效果。

Answer 1

您必须提供column width，如下所示。

columnDefs: [
                    {
                        name: app.localize('IplNumber'),
                        field: 'id',
                        width: 100,
                    },
                    {
                        name: app.localize('BrDateReceived'),
                        field: 'bpoHeaderPerformedForsOutput[0].dateReceived',
                        width: 140,
                    },
 ],

要启用Horizontal Scroll bar，您必须按照下面的说明进行操作。

enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,

Answer 2

使用百分比为列定义中的每个字段添加宽度。它将解决问题。

[ { name: app.localize('IplNumber'), field: 'id', width: 10% }, 
  { name: app.localize('BrDateReceived'), field:width: 15% }
]

指定所有字段。