在 ui.grid 中增加列宽

Question

我在网格中插入了一些虚拟object，网格中的数据显示发现了一些问题。这是我的代码：

html:

<div class="gridStyle" ui-grid="gridOptions"></div>

js:

$scope.myData = [{
    JobId: '196',
    siteType: 'abc',
    Title: 'Happy womans day',
    Message: 'hello',
    devicetype: 'A',
    jobDuration: '819',
    totalMsgs: '2016',
    msgsDelivered: 'Msg not found In the whole Body',
    msgsFailed: '789',
    jobCreatedDate: '11-03-2015',
    jobCreatedBy: 'abc@abc.com'
}];
$scope.gridOptions = {
    data: 'myData'
};

css :

.ui-grid-header-cell .ui-grid-cell-contents {
    height: 48px;
    white-space: normal;
    -ms-text-overflow: clip;
    -o-text-overflow: clip;
    text-overflow: clip;
    overflow: visible;
}

数据显示在网格中，但只能达到某个固定宽度。无法包裹长文本， for eg:Msg not found In the whole Body, 显示为 Msg not found.......

如何增加每一列的宽度？
我无法将长文本行换成 2-3 行，整个文本仅显示在一行中
以上css仅适用于headers

Answer 1

好的，有几件事。

首先，要设置您需要使用列定义的列宽，然后您可以设置每个列的宽度（以像素或百分比为单位）。请参考 http://ui-grid.info/docs/#/tutorial/201_editable 作为具有列宽的示例。

其次，可以添加工具提示，这是一种显示不适合 space 可用单元格的方法。参考 http://ui-grid.info/docs/#/tutorial/117_tooltips

第三，您可以使行更高，因此 space 可以将内容包裹在其中。请注意，所有行的高度必须相同，因此您不能只让需要更高的行。

gridOptions.rowHeight = 50;

您还需要在 div 上设置 white-space 属性，以便它换行，您可以通过在 cellTemplate 中设置 class 来实现，并且然后向 css.

添加样式

以 plunker 为例：http://plnkr.co/edit/kyhRm08ZtIKYspDqgyRa?p=preview

Answer 2

设置 javascript 的依赖关系：

angular.module('app', [
    'ngTouch', 
    'ui.grid',
    'ui.grid.autoResize',
    'ui.grid.resizeColumns'
])

对于 ui-grid 3.0，我正在使用这个指令：

 .directive('setOuterHeight',['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element) {
          $timeout(function(){
            // Get the Parent Divider.
            var parentContainer = element.parent()[0];
            console.log(parentContainer.offsetHeight);

            // Padding of ui-grid-cell-contents is 5px.
            // TODO: Better way to get padding height?
            var topBottomPadding = 10;
            //Get the wrapped contents rowHeight.
            var rowHeight = topBottomPadding + parentContainer.offsetHeight;
            var gridRowHeight = scope.grid.options.rowHeight;
            // Get current rowHeight
            if (!gridRowHeight ||
                    (gridRowHeight && gridRowHeight < rowHeight)) {
                // This will OVERRIDE the existing rowHeight.
                scope.grid.options.rowHeight = rowHeight;
            }
          },0);
        }
    };
}])

在控制器下：

.controller('MainCtrl',
    ['$scope', '$q', '$timeout', 'uiGridConstants',
        function ($scope, $q, $timeout, uiGridConstants) {
            $scope.gridOptions = {
                enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER,
                enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
                columnDefs: [
                    {name: 'firstName', width: '*'},
                    {name: 'lastName', width: '*'},
                    {
                        name: 'company', width: '*',
                        cellTooltip: function (row) {
                            return row.entity.company;
                        },
                        cellTemplate: '<div class="ui-grid-cell-contents wrap" title="TOOLTIP"><div><span class="label" set-row-height>{{row.entity.company}} </span></div><div>'
                    },
                    {name: 'employed', width: '*'}
                ],
                enableColumnResize: true,
                rowHeight: 10,
            };
        }]);

*注意 cellTemplate 的 set-row-height 指令。

对于CSS，您必须照常放置白色-space：

.wrap {
    white-space: normal;
}
.wrap .label {
     display: inline-block;
}

最后，HTML 更改网格高度：

<div id="grid1" ui-grid="gridOptions" class="grid" ng-style="{height: (gridOptions.data.length*gridOptions.rowHeight)+32+'px'}" ui-grid-resize-columns  ui-grid-auto-resize></div>

Plunker 示例在这里： http://plnkr.co/edit/OwgEfru0QyFaU1XJFezv?p=preview

在 ui.grid 中增加列宽

Increase width of column in ui.grid

angularjs

angular-ui-grid