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

发布时间：2020-12-17 06:50:59 所属栏目：安全来源：网络整理

导读：我在Grid中插入了一些虚拟对象,在网格中显示的数据发现了一些问题.这是我的代码： HTML： div class="gridStyle" ui-grid="gridOptions"/div JS： $scope.myData = [{ JobId: '196',siteType: 'abc',Title: 'Happy womans day',Message: 'hello',devicetype:

我在Grid中插入了一些虚拟对象,在网格中显示的数据发现了一些问题.这是我的代码：

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,显示为Msg而不是foun ………..

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

解决方法

好的,一些事情.

首先,要设置列宽,需要使用列定义,然后可以设置宽度(以像素为单位)或百分比.请参阅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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!