web-dev-qa-db-ja.com

Yii2のアクション列アイテムを除く、リンクとしてのGridView行

以下のコードを使用すると、アクション列の削除/更新リンクが上書きされます。

'rowOptions' => function ($model, $key, $index, $grid) {
    return [
        'id'      => $model['id'], 
        'onclick' => 'location.href="' 
            . Yii::$app->urlManager->createUrl('accountinfo/update') 
            .'?id="+(this.id);',
    ];
},

私は多くの列を持っているので、各列で以下のコードを使用する代わりに、1つの場所でリンクURLを指定するのが良いでしょう：

 'value' => function ($data) {
                return Html::url('site/index');
            }

では、アクション列を除くGridViewの行全体にリンクを与える最良の方法はありますか？

編集：フルグリッドビュー

GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel'  => $searchModel,
    'rowOptions'   => function ($model, $index, $widget, $grid) {
        if ($widget == 1)
            return [
                'id' => $model['id'], 
                'onclick' => 'location.href="'
                    . Yii::$app->urlManager->createUrl('accountinfo/update') 
                    . '?id="+(this.id);'
            ];
    },
    'columns'      => [
        ['class' => 'yii\grid\SerialColumn'],

        // 'id',
        'f_name',
        'l_name',
        'address',
        'country',
        'state',
        'city',
        'pincode',
        [
            'attribute' => 'status',
            'value'     => function ($model, $key, $index, $column) {
                return $model->status == '1' ? 'Enabled' : 'Disabled';
            },
            'filter'    => [1 => 'Enabled', 0 => 'Disabled'],
        ],
        'card',
        'note',
        'balance',
        'is_new',
        [
            'attribute' => 'is_new',
            'value'     => function ($model, $key, $index, $column) {
                return $model->is_new == '1' ? 'Yes' : 'No';
            },
            'filter'    => [1 => 'Yes', 0 => 'No'],
        ],
        [
            'class'    => 'yii\grid\ActionColumn',
            'template' => '{update}  {delete}',
        ],
    ],
]);
phpgridviewyii2
10
SO-user

あなたはこれを試すことができます。ユーザーが別の要素でカバーされていないtd要素をクリックする限り、行全体をクリック可能になります。したがって、アクション列もクリック可能な行の一部ですが、グリフィコンではありません。

<?= GridView::widget([

    ...

    'rowOptions'   => function ($model, $key, $index, $grid) {
        return ['data-id' => $model->id];
    },

    ...

]); ?>

<?php
$this->registerJs("

    $('td').click(function (e) {
        var id = $(this).closest('tr').data('id');
        if(e.target == this)
            location.href = '" . Url::to(['accountinfo/update']) . "?id=' + id;
    });

");

event.target のドキュメントも参照してください。

ターゲットプロパティは、イベントに登録した要素またはその子孫にすることができます。イベントのバブリングが原因でイベントが処理されているかどうかを判断するために、event.targetをこれと比較すると便利なことがよくあります。このプロパティは、イベントがバブルするときのイベントの委任に非常に役立ちます。

12
robsch

フィルタ列でイベントがトリガーされないように、以下のJavaScriptを使用することをお勧めします。

<?php
$this->registerJs("
    $('td').click(function (e) {
        var id = $(this).closest('tr').data('id');
        if (e.target == this && id)
            location.href = '" . Url::to(['thread/view']) . "?id=' + id;
    });
");

または

<?php
$this->registerJs("
    $('tbody td').css('cursor', 'pointer');
    $('tbody td').click(function (e) {
        var id = $(this).closest('tr').data('id');
        if (e.target == this)
            location.href = '" . Url::to(['thread/view']) . "?id=' + id;
    });
");
4
Maciej Strączkowski
[
    'attribute'=>'website',
    'format' => 'raw',
    'value'=>function ($data) {
    $wsite = Agents::find()
             ->all();
    return Html::a(Html::encode($wsite[0]->website), $wsite[0]->website);
     },
    'label'=>'Website',
    'vAlign'=>'middle',
    'width'=>'150px',             
],
1
Geoffrey K. Kamundi

ユーザー'filterPosition'=>' ',

<?=
                    GridView::widget([
                        'dataProvider' => $dataProvider,
                        'filterModel' => $searchModel,
                        'resizableColumns' => true,
                        'containerOptions' => ['style' => 'overflow: auto'], // only set when $responsive = false
                        'headerRowOptions' => ['class' => 'kartik-sheet-style'],
                        'filterRowOptions' => ['class' => 'kartik-sheet-style'],
                        'pjax' => true,
                        'hover' => true,
                        'export' => false,
                        'columns' => $gridColumns,
                        'filterPosition'=>' ',
                    ]);
                    ?>
0
Rahul Pawar

これらのソリューションでは、次の場合を除いて何も機能しませんでした。

echo GridView::widget([
   ...
   'rowOptions' => function ($model, $key, $index, $grid) {
        return [
            'style' => "cursor: pointer",
            'myurl' => ['/route','id'=>$model->id],
        ];
    }
    ...

そしてJavascriptの部分：

$this->registerJs("
    $('tbody tr[myurl]').click(function (e) {
        if ($(e.target).is('td')) {
            window.location.href = $(this).attr('myurl');
        } 
    });
");

他の解決策が機能しなかった理由は今はわかりませんが、私の場合のように、この解決策は何時間も時間を無駄にする前に誰かを助けるかもしれません:-(

0
WeSee
 GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $filterModel,
        'rowOptions' => function ($m, $key, $index, $grid) {
            return ['data-href' => 'book-vgift/girl-vgift?to=' . $m->user_id];
        },
        'columns' => [
            [

JavaScriptファイル

$('table tr[data-href]').click(function () {

    if ($(this).data('href') !== undefined) {
        window.location.href = $(this).data('href');
    }

});
0
Isayevskiy_Sergey

この機能を使用してください：

$(document).on('click','td', function(e) {
               var id = $(this).closest('tr').data('id');
               if(e.target == this)
                   location.href = id;
 });

そうしないと、Pjaxによるページ付けによってリンクが切断されます。

0
Menno

使用：rowOptions

<?=
GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'layout' => "{summary}\n<div class='table table-responsive list-table'>{items}\n</div><div class='text-center'>{pager}</div>",
    'rowOptions' => function ($model, $key, $index, $grid) {
        return ['data-id' => $model->id];
    },
    'columns' => [
        ['class' => 'yii\grid\SerialColumn', 'contentOptions' => ['width' => '']],
        'name',
        'email',
        [
            'class'    => 'yii\grid\ActionColumn',
            'contentOptions' => ['class' => 'disable-click'],
            'header' => "Actions",
            'template' => '{update}&nbsp;&nbsp;{delete}',
        ],
        ],
]);
?>

<?php
$this->registerJs("
    $('tbody td:not(.disable-click)').css('cursor', 'pointer');
    $(document).on('click','table tr td:not(.disable-click)',function(e) {      
        var id = $(this).closest('tr').data('id');
        if (e.target == this && id)
            location.href = '" . Url::to(['/contacts/view']) . "?id=' + id;
    });
");
?>
0
Mahesh Kathiriya