Kartik gridView文本不会包含在单元格中

Question

我正在使用kartik gridView来显示数据。 我试图为列提供宽度，但我的数据溢出它的单元格边界并且不会换行。我使用以下代码：

$columns = [
    ['class'=>'kartik\grid\SerialColumn', 'width'=>'38px'],

    [
        'attribute'=>'bill_number', 
        'vAlign'=>'middle',
        'hAlign'=>'left',             
        'noWrap' => false,
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
        'format'=>['html'],
        'pageSummary'=>'Page Total'
    ],

    [
        'attribute'=>'bill_date', 
        'vAlign'=>'middle',
        'hAlign'=>'left', 

        'noWrap' => false,
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
    ],

    [
        'attribute'=>'party_name', 
        'vAlign'=>'middle',
        'hAlign'=>'left', 

        'noWrap' => false,
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
        'format'=>['html'],
    ],
    [
        'attribute'=>'assignment_name', 
        'vAlign'=>'middle',
        'hAlign'=>'left',            
        'noWrap' => false,
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
    ],

    [
        'attribute'=>'particulars', 
        'vAlign'=>'middle',
        'hAlign'=>'left',             
        'noWrap' => false,
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
        'format'=>['html'],
    ],     

    [
        'attribute'=>'0-60 days', 
        'label'=>'0-60 days',
        'vAlign'=>'middle',
        'hAlign'=>'right',
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
        'format'=>['decimal', 0],
        'pageSummary'=>true
    ],

    [
        'attribute'=>'60-90 days', 
        'label'=>'60-90 days', 
        'vAlign'=>'middle',
        'hAlign'=>'right',
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
        'format'=>['decimal', 0],
        'pageSummary'=>true
    ],

    [
        'attribute'=>'90-180 days',
        'label'=>'90-180 days', 
        'vAlign'=>'middle',
        'hAlign'=>'right',            
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
        'format'=>['decimal', 0],
        'pageSummary'=>true
    ],
    [
        'attribute'=>'>180 days', 
        'vAlign'=>'middle',
        'hAlign'=>'right',            
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
        'format'=>['decimal', 0],
        'pageSummary'=>true
    ],
    [
        'attribute'=>'total', 
        'vAlign'=>'middle',
        'hAlign'=>'right', 
        'headerOptions'=>['style'=>'max-width: 100px;'],
        'contentOptions'=>['style'=>'max-width: 100px;'],
        'format'=>['decimal', 0],
        'pageSummary'=>true
    ],    
];

echo GridView::widget([
    'columns'=>$columns,
    'dataProvider'=>$dataProvider,
    'floatHeader'=>true,
    'floatHeaderOptions'=>['top'=>'50px'],
    'floatOverflowContainer' => true,
    'responsiveWrap'=>false,
    'showPageSummary'=>true,
    'resizableColumns'=>true,
    'persistResize' => false,
    'panel' => [
        'type'=>GridView::TYPE_PRIMARY,

        'footer'=>false
    ],
    'containerOptions'=>['style'=>'overflow: auto'], 
]);

请查看截屏

我想将文本包装在单元格中，并根据该行中的最大单元格高度调整行高。

Answer 1

试试这个

[
  'class' => 'kartik\grid\DataColumn',
  'attribute'=>'YOUR_ATTRIBUTE_NAME', 
  'headerOptions'=>['style'=>'max-width: 100px;'],
  'contentOptions'=>['style'=>'max-width: 100px;vertical-align:middle'],
  'format'=>'raw',
  'value' => function($model) {
          return "<p 'style'='max-width:150px; min-height:100px; 
           overflow: auto; word-wrap: break-word;'>". $model->YOUR_ATTRIBUTE_NAME."</p>";
  },
],

Answer 2

试试这个：

[
    'attribute'=>'attribute', 
    'value'=>function($data){
      return wordwrap($data->attribute,15,'<br>');
    }
],   

Answer 3

试试这个，它可能会有所帮助。

[
         'attribute'=>'',
         'header'=>'',
         'value' => function ($dataProvider) {
              return something;
          },
         'format'=>'raw',
         'contentOptions'=>['style'=>'width:80px;text-align:center;']
],

Answer 4

HTML标记，不要附加在 value 插槽中，它必须添加 contentOptions 并设置其样式...