CGridView에서 행 오버플로 Yii

Question

CGridView를 사용하고 있는데 잘 작동하지만 작은 prob가 있습니다. 행이 겹치기 때문에 (아래 화면 참조) 열을 관리하려면 Ecolumns Extension을 사용하기 시작합니다.

여기

는이 JSFiddle example

아무도 그것을 관리하는 방법에 대한 어떤 생각을 가지고 있는가이다 하지만 언젠가 나는 모든 열을 표시해야하며 (특히 모바일 장치에서) 모두에서 편리 아니다, 모든 열이 표시 되더라도 Grid 내에서 모든 행이 맞도록하려면? 당신에게

편집 감사합니다 : 생성 된 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, 
    )); 

?> 

Answer 1

여기 당신이 테이블에 필요한 추가 CSS입니다. 그러나 모든 것을 창 너비에 맞추면 더 작은 화면에서 부끄러워 보일 것입니다. 또한 각 테이블 셀은 기본적으로 동일한 너비가됩니다. 이 옵션을 작은 화면에만 적용하려면 CSS 미디어 쿼리를 사용하는 것이 좋습니다.

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

업데이트 바이올린 : 확장에 의해 생성 된 HTML의 샘플없이 http://jsfiddle.net/37m6ja3v/2/