Yii gridview rows onclick zum Erweitern und Anzeigen von Detailansichten unter der Zeile im Raster

Question

Wie zeigt man eine Rasteransicht wie das Raster in GRIDVIEW WITH ROW EXPAND AND COLLAPSE sollte das Raster normale Daten in der Ansicht anzeigen, wenn auf die Zeile geklickt wird, die die Details einer entsprechenden Zeile anzeigen soll. bitte inthis helfen ... meine Ausgabe soll

wie sein und wenn ich die Zeile klicken sollte es erweitern und gibt Details (das Bild Tabelle zeigen, aber das ist brauche ich brauche nicht die Detailansicht zu machen in diesem.

BEARBEITET Ich habe vergessen, das Gitter hinzuzufügen, wird von einem Modell geladen, und die Zeilendetails werden von einem anderen Modell geladen.

<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'books-grid', 
'dataProvider'=>$model->Projectwisereport(), 
//'filter'=>$model, 

'columns'=>array(

    array(
     'name' => 'Project', 
     'value' => 'Project::model()->findByPk($data->Project)->proj_name', 
    'filter'=>CHtml::listData(Project::model()->findall(),'proj_id','proj_name'), 
     ), 

    'isbn_no', 
    'source_type', 
array(
     'name' => 'complexity', 
     'value' => 'Complexity::model()->findByPk($data->complexity)->Complexity_Name', 
                 'filter'=>CHtml::listData(Complexity::model()->findall(),'id','Complexity_Name'), 
     'footer'=>'Total Page', 
     ), 
     array('class'=>'CButtonColumn', 
    'template'=>'{detail}', 
    'buttons'=>array(
     'detail'=>array(
      'label'=>'Show Details', 
        'url' =>'Yii::app()->createUrl("Process/View", array("id"=>$data->book_id))', 
        'options'=>array('title'=>'Show details','class'=>'detailsLink'), 
    'click'=>"$('#your-grid-book_id').on('click','.detailsLink',function(){ 
    var row=$(this).closest('tr'); 
     var url=$(this).attr('href'); 
    $.get(url,{},function(data){ 
    row.after(data.row); 
    },'json'); 
    })", 

      ) 
    ) 
) 

), 
    )); ?> 

i trided dies aber kein Gebrauch Gitter ist aus Büchern Modell und Link zum Prozessmodell in der CButton Spalte

Answer 1

Try this:

In Gridview:

'columns'=>array 
    (
      'ID', 
      array 
      (
        'name'=>'...', 
        'htmlOptions'=>array('class'=>'plus','id'=>$data->id), 
        'value'=>'...', 
      ), 
      ... 
    ), 

js Code :

$(".plus").click(function(){ 
var data = $(this).attr('id'); 
var url = ...ajax url... 
jQuery.ajax({ 
       'type':'post', 
       'data':data, 
       'url':url, 
       'cache':false, 
       'success':function(html){ 
               var new_data = $("<div></div>").attr("class", "appended_data").html(html).attr("id",data); 
               $(this).parent().append(new_data); 
               $(this).removeClass('plus'); 
               $(this).addClass('minus'); 
             } 
     }); 
}); 

Von Ihrem Controller Ajax Aktion senden Daten in trs (Tabellenzeilen) .. Ich hoffe, dass der Code selbst explainatory ist ..

Answer 2

Von Rajats antworten Ich habe es wie folgt arbeiten:

In gridview-Taste:

array(
      'class' => 'ButtonColumn', 
      'template' => '{view}{confirm}', 
      'evaluateID' => true, 
      'buttons' => array(
       'view' => array(
        'icon' => 'info-sign white', 
        'url' => '#', 
        'options' => array(
         'title' => Yii::t('app', 'view'), 
         'onclick' => 'javascript:toggleRow($(this).attr("id"))', 
         'class' => 'btn-primary', 
         'id' => '$data->id' 
        ), 

um ID-Taste aus Zeilendaten zuordnen, können Sie eine benutzerdefinierte ButtonColumn Klasse verwenden müssen, habe ich derjenige hier gepostet: http://www.yiiframework.com/wiki/372/cbuttoncolumn-use-special-variable-data-for-the-id-in-the-options-of-a-button/

der Javascript-Code:

function toggleRow(id) { 
    if ($('#table'+id).length) { 
     $('#table'+id).remove(); 
    } else { 
     $.ajax({ 
      'type': 'post', 
      'data': { 
       "payment_id": id 
      }, 
      'url': "<?php echo Yii::app()->createUrl('controller/action'); ?>", 
      'success': function (html) { 
       var new_data = $("<tr></tr>").attr("class", "btn-danger").html(html).attr("id", "table"+id); 
       new_data.insertAfter($('#' + id).parent().parent()); 
      }, 
      'error': function (err) { 
       console.log(err); 
      } 
     }); 
    } 
} 

Und in Controller-Aktion finden Sie das Modell aus der ID von Ajax zur Verfügung gestellt und gibt ein HTML string:

public function actionControlleraction(){ 
    if (isset($_POST['payment_id'])) { 
     $payment = Payment::model()->findByPk($_POST['payment_id']); 
     $html = $payment->createHtmlTable(); 
     print_r($html); 
    } 
} 

Im obigen Beispiel ist der HTML-Code für eine Tabelle ist in meinem Zahlungsmodell generiert.