CGridView中的行溢出问题 – Yii

Question

CGridView中的行溢出问题 – Yii

3

我正在使用CGridView，它的工作正常，但我有一个小问题。行重叠（见下面的屏幕截图），我开始使用Ecolumns Extension来管理列。但有时我需要显示所有列，这真的很不方便（特别是在移动设备上）。

这里是一个JSFiddle示例。

请问有没有人知道如何管理它，使所有行都适合于网格中，即使显示所有列也一样，请？谢谢。 编辑：生成的HTML代码

<div style="display: none" id="*****-grid-ecolumns-dlg">
<form id="*****-grid-ecolumns" action="/*****/index.php?r=*****" method="POST">
<input type="hidden" value="1" name="*****-grid-ecolumns-set" id="*****-grid-ecolumns-set" />
    <ul id="yw1">

<li class="ui-state-default" id="*****"><label><input type="checkbox" name="*****-grid-ecolumns[]" value="****" checked>&nbsp;****</label></li>
<li class="ui-state-default" id="user_id"><label><input type="checkbox" name="*****-grid-ecolumns[]" value="user_id" checked>&nbsp;User</label></li>

    </ul>
<div><input type="submit" onclick="$(&quot;#*****-grid-ecolumns-dlg&quot;).dialog(&quot;close&quot;)" style="float: left" name="yt1" value="Apply" />
<input type="button" onclick="$(&quot;#*****-grid-ecolumns-dlg&quot;).dialog(&quot;close&quot;); return false;" style="float: right" name="yt0" value="Close" />
<input type="button" class="reset" value="Reset" style="float: right">
    </div></form></div>

    <div class="grid-view rounded" id="*****-grid">
<a class="ecolumns-link" id="*****-grid-ecolumns-dlg-link" href="#">Settings</a>
<div class="summary">Displaying 1-50 of 556 results.</div>
<table class="items">
<thead><tr>
<th id="*****-grid_c0">
<a class="sort-link" href="/*****/index.php?r=*****/index&amp;*****_sort=*****_id">*****</a>
</th>
<th id="*****-grid_c1">
<a class="sort-link" href="/*****/index.php?r=*****/index&amp;*****_sort=user_id">User</a></th>
</thead>
<tbody>
<tr class="odd">
<td>*</td><td>*</td>
<td>***</td><td>***</td>
<td>***</td><td></td>
<td></td><td></td>
<td>***</td><td></td>
<td></td><td></td>
<td>***</td><td>***</td>
<td class="button-column"><a class="update" title="Update" href="/*****/index.php?r=*****/update&amp;id=4">
<img src="/******/gr-update.png" alt="Update" /></a>
<a title="Edit" href="****">
<img src="****/home.jpg" alt="edit" />
</a></td></tr>
</tbody></table> </div>

PHP代码

<?php 
        $dialog = $this->widget('ext.ecolumns.EColumnsDialog', array(
               'options'=>array(
                    'title' => 'Table Settings',
                    'autoOpen' => false,
                    'show' =>  'fade',
                    'hide' =>  'fade',
                ),
               'htmlOptions' => array('style' => 'display: none'), //disable flush of dialog content
               'ecolumns' => array(
                    'gridId' => '*****-grid', //id of related grid
                    'storage' => 'session',  //where to store settings: 'db', 'session', 'cookie'
                   // 'fixedLeft' => array('CCheckBoxColumn'), //fix checkbox to the left side 
                    'model' =>$dataProvider->model, //model is used to get attribute labels

                    'columns'=>array(
                        '*****_id',
                        'user_id',
                        ....
                        ....

                        array('header'=>'Operations',
                            'class'=>'CButtonColumn',
                                            'viewButtonImageUrl' => Yii::app()->baseUrl . '/css/gridViewStyle/images/' . 'gr-view.png',
                                            'updateButtonImageUrl' => Yii::app()->baseUrl . '/css/gridViewStyle/images/' . 'gr-update.png',
                                            //'deleteButtonImageUrl' => Yii::app()->baseUrl . '/css/gridViewStyle/images/' . 'gr-delete.png',
                                        'template'=>'{update}{edit}',

                        ),
                    ),
                ),  
)); 

$this->widget('zii.widgets.grid.CGridView', array(
        'id' => '*****-grid',
        'dataProvider'=>$dataProvider,
        'template' => $dialog->link()."{summary}\n{items}\n{pager}",
       'pager' => array('cssFile' => Yii::app()->baseUrl . '/css/gridViewStyle/gridView.css'),
       'cssFile' => Yii::app()->baseUrl . '/css/gridViewStyle/gridView.css',
       'htmlOptions' => array('class' => 'grid-view rounded'),
        'columns' => $dialog->columns(),
    //'itemView'=>'_brochureview',
    //'columns' => 3
    //'filter'=>$model,
    ));

?>

- Test404

但是这个表格并不是使用扩展生成的，而是标准的CGridView表格，该扩展只是我的问题的部分解决方案，而不是问题的根源。 - Test404

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samuel Liew · Accepted Answer

这是你需要的用于表格的额外CSS。然而，通过将所有内容适应窗口宽度，它在较小的屏幕上看起来会很挤。这也会使每个表格单元格默认具有相等的宽度。您可能希望使用CSS媒体查询仅在较小的屏幕上应用此样式。

.grid-view table.items {
    width: 100%;
    table-layout: fixed;
}

更新的代码片段： http://jsfiddle.net/37m6ja3v/2/