3

GRIDVIEW WITH ROW EXPAND AND COLLAPSEでグリッドのようなグリッドビューを表示する方法対応する行の詳細を表示する必要がある行をクリックすると、グリッドはビューに通常のデータを表示する必要があります..助けてください...私の出力は次のようになります

私のグリッドはこのようにする必要があります

そして、行をクリックすると、展開されて詳細が表示されます（画像にはテーブルが表示されますが、詳細ビューをレンダリングする必要はありません。 ここに画像の説明を入力

EDITEDグリッドが1つのモデルからロードし、行の詳細が別のモデルからロードされるものを追加するのを忘れました。

<?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');
     })",

            )
    ) 
)

),
    )); ?>

私はこれを試しましたが、ブックモデルからのグリッドは使用せず、CButton列のプロセスモデルへのリンクはありません

4

2 に答える 2

4

これを試して：

GridView で:

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

js コード:

$(".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');
                                        }
        }); 
});

コントローラーの ajax アクションから、trs(テーブル行) でデータを送信します。コードが自明であることを願っています。

于 2012-04-12T17:36:09.197 に答える
0

Rajat の回答から、次のように動作するようになりました。

グリッドビュー ボタン:

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'
                    ),

行データからボタンに ID を割り当てられるようにするには、カスタム ButtonColumn クラスを使用する必要があります。ボタンのオプションの ID のデータ/

JavaScript コード:

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);
            }
        });
    }
}

コントローラーのアクションでは、ajax によって提供された ID からモデルを見つけて、html 文字列を返します。

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

上記の例では、テーブルの html コードが支払いモデルで生成されます。

于 2015-03-04T11:18:07.410 に答える