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在整个Body中，显示为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中添加一个样式来实现。

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

增加ui.grid中列的宽度

1 个答案: