2017-03-09 4 views
0

phpで新しく、yii2をWeb開発の基礎として使用してください。このコードを単純化するのを手伝ってください。ポップアップActionColumnボタンに表示しようとしています。表示、更新、および削除ボタン。両方のボタンの追加ここに私のコードyii2繰り返しコードインデックスを簡略化する方法ph

'class' => 'yii\grid\ActionColumn', 
    'buttons'=>[ 
    'view'=>function($url,$model){ 
     return Html::a('<span class="glyphicon glyphicon-eye-open")></span>',$url,['class'=>'view', 'data-pjax'=>0]); 
    }, 
    'update'=>function($url,$model){ 
     return Html::a('<span class="glyphicon glyphicon-pencil")></span>',$url,['class'=>'update', 'data-pjax'=>0]); 
         } 
        ], 
       ], 
      ], 
     ]); 

    $this->registerJs(
     "$(document).on('ready pjax:success', function() { // 'pjax:success' use if you have used pjax 
      $('.view').click(function(e){ 
       e.preventDefault();  
        $('#pModal').modal('show') 
           .find('#modalContent') 
           .load($(this).attr('href')); 
      }); 
     }); 
    "); 

     Modal::begin([ 
      //'header'=>'<span id="modalHeaderTitle"></span>', 
      //'headerOptions'=>['id'=>'modalHeader'], 
      'id'=>'pModal', 
      'size'=>'modal-lg', 
        //keeps from closing modal with esc key or by clicking out of the modal. 
        // user must click cancel or X to close 
       'clientOptions' => ['backdrop' => 'static', 'keyboard' => FALSE] 
      ]); 

      echo "<div id='modalContent'></div>"; 

      Modal::end(); 


    $this->registerJs(
     "$(document).on('ready pjax:success', function() { // 'pjax:success' use if you have used pjax 
      $('.update').click(function(e){ 
       e.preventDefault();  
        $('#qModal').modal('show') 
           .find('#modalContent') 
           .load($(this).attr('href')); 
      }); 
     }); 
    "); 

     Modal::begin([ 
      //'header'=>'<span id="modalHeaderTitle"></span>', 
      //'headerOptions'=>['id'=>'modalHeader'], 
      'id'=>'qModal', 
      'size'=>'modal-lg', 
        //keeps from closing modal with esc key or by clicking out of the modal. 
        // user must click cancel or X to close 
       'clientOptions' => ['backdrop' => 'static', 'keyboard' => FALSE] 
      ]); 

      echo "<div id='modalContent'></div>"; 

      Modal::end() 
      ?> 

+0

あなたが実際に欲しいですか?単一のjsを呼び出す場合は、両方のボタンで同じクラスを追加するだけです。 'activebtn'のようにして、それに関してjsを呼び出します。しかし、あなたは 'Modal'コンテンツで何を見せたいのですか? –

+0

私は2つのモーダルpModalとqModalに対して2つのインラインjsを持っています。ビューに適したスクリプトを作成し、モーダルを更新するにはどうすればよいですか。 –

+0

私のコメントは申し訳ありません。私は、iveが2つのモーダルに対して1つのjsを持つことを頑張ったので、それを考えました。このインラインスクリプトからjsファイルを作成することは安全でしょうか。どのように私のデザインでこの外部ファイルを呼び出すことができます –

答えて

0
'buttons'=>[ 
'view'=>function($url,$model){ 
    return Html::a('<span class="glyphicon glyphicon-eye-open")></span>',$url,['class'=>'view action-btn', 'data-pjax'=>0]); 
}, 
'update'=>function($url,$model){ 
    return Html::a('<span class="glyphicon glyphicon-pencil")></span>',$url,['class'=>'update action-btn', 'data-pjax'=>0]); 
        } 
       ], 
      ], 
     ], 

action-btn私を支援してくださいます。今あなたのビューからajaxを呼び出し、そこにモーダルコードを記述します。

$this->registerJs("$.ajax({ 
      url: '$url', 
      type: 'POST', 
      data: { }, 
      success: function(data) { 
      //your code      
      } 
     });"); 

$url = \Yii::$app->urlManager->createUrl(['/your-action-here']); あなたがリダイレクトされているビューファイルにmodalコードを記述します。

0
'buttons' => [ 
    'view' => function ($url, $model) { 
     return Html::a(
      '<span class="glyphicon glyphicon-eye-open")></span>', 
      $url, 
      [ 
       'class' => 'openModal', 
       'data-pjax' => 0 
      ] 
     ); 
    }, 
    'update' => function ($url, $model) { 
     return Html::a(
      '<span class="glyphicon glyphicon-pencil")></span>', 
      $url, 
      [ 
       'class' => 'openModal', 
       'data-pjax' => 0 
      ] 
     ); 
    }, 
] 

モーダル

Modal::begin([ 
    'id' => 'modal-popup', 
    'size' => 'modal-lg', 
    'clientOptions' => [ 
     'backdrop' => 'static', 
     'keyboard' => FALSE 
    ] 
]); 
echo "<div id='modalContent'></div>"; 
Modal::end(); 

JS

$this->registerJs(
    "$(document).on('ready pjax:success', function() { 
     $('.openModal').click(function(e) { 
      e.preventDefault();  
      $('#modal-popup').modal('show').find('#modalContent').load($(this).attr('href')); 
     }); 
    }); 
"); 
+0

ありがとう!もっと聞くことはできますか?私はこのインラインjsを外部jsとして何度も使用しますどのように私はそれを呼び出すのですか? –

+0

私はこれのためのコンポーネントを作成しましたが、残念ながらそれはどこにアップロードされていない、時間を与える、私は要点を共有します。 –

+0

@CristinaJesuitas。 [Modal Widget](https://gist.github.com/InsaneSkull/9aa45b0bf7a7c1a64098e59c1d405308)。これはかなり貧弱なウィジェットですが、使用しないでください。しかし、あなたはすべての人に共通のjを書く方法を知っています。 –

関連する問題