angularjs - 增加 ui.grid 中列的宽度

Question

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

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;
}

数据显示在网格中，但仅限于某个固定宽度。无法换行长文本，
例如:Msg not found In the whole Body, Displays as Msg not foun...........

如何增加每一列的宽度？

我无法将长文本行包装成 2-3 行，整个文本仅显示在一行

以上 css 仅适用于标题

Answer 1

好的，有几件事。

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

其次，可以添加工具提示，这是显示不适合可用空间的较长单元格的一种方式。引用 http://ui-grid.info/docs/#/tutorial/117_tooltips

第三，您可以使行更高，因此有空间在其中包装内容。请注意，所有行必须具有相同的高度，因此您不能只将需要它的行设置得更高。

gridOptions.rowHeight = 50;

您还需要在 div 上设置 white-space 属性以使其环绕，您可以通过在 cellTemplate 中设置一个类，然后向 css 添加样式来实现。

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