Как отправить POST только для одной строки в gridview

Question

Я создаю таблицу, в которой клиенты могут сортировать записи по своему желанию.Как разместить только одну строку из всей таблицы?

Я уже пытался обернуть всю таблицу GridView в форму, в результате чего при отправке вся таблица получает POST, а не конкретную запись.

Вот GridView:

        <?=Html::beginForm(['list-profile/resort'], 'post', ['class' => 'form-inline', 'name' => 'resort-channel-list']);?>
        <?=GridView::widget([
            'dataProvider' => $dataProvider,
            'filterModel' => $searchModel,
            'pager' => [
                'firstPageLabel' => Yii::t('app', 'First'),
                'lastPageLabel' => Yii::t('app', 'Last'),
            ],
            'columns' => [
                [
                    'label'=>'#',
                    'attribute' => 'channel.sort',
                    'value' => 'channel.sort',
                ],
                [
                    'label'=>'Sort No.',
                    'attribute'=>'no',
                    'format' => 'raw',
                    'value'=> function ($data) {
                        return Html::textInput("sort",$data->no,array("style"=>"width:40px;"));
                    },
                ],
                [
                    'label'=>'Action',
                    'attribute'=>'no',
                    'format' => 'raw',
                    'value'=> function ($data) {
                        return Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success']);
                    },
                ],
                [
                    'attribute' => 'channel.name',
                    'format' => 'raw',
                    'value' => function ($data) {
                        return Html::a($data->getChannelName($data->channel_id), ['update', 'id' => $data->id, 'name' => Yii::$app->request->get('name')], ['data-pjax' => 0]);
                    },
                ],
                 'create_time',
                 'update_time',
                ['class' => 'yii\grid\ActionColumn',
                    'template' => '{remove} | {save}',
                    'buttons' => [
                        'remove' => function ($url, $model, $key) {
                            return Html::a('<span class="glyphicon glyphicon-remove text-danger"></span>', ['list-profile/index', 'rem_id' => $model->id, 'name' => Yii::$app->request->get('name')], ['title' => Yii::t('app', 'Remove from profile'),
                             ]
                            );
                        },
                    ],
                    'contentOptions' => ['style' => 'min-width: 80px;text-align: center;'],
                ],
            ]
        ]);?>
        <?=Html::endForm();?>

Вот изображение, как выглядит таблица:

Изображение таблицы

Answer 1

Существует атрибут data-key, который связывает строки с записью в Gridview, которую вы можете использовать для нацеливания на эту конкретную строку и сбора входных данных.

Тогда почему вы назначаете кнопку внутрив столбце Data вы должны поместить его в столбец Action, который предназначен для этой цели.

Что делать

• Сначала необходимо изменить Html::submitButton() к обычной кнопке, добавьте класс submit и атрибут data-key и переместите его в столбец Action.

  return Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success']);
  

  на

  return Html::button(Yii::t('app', 'Save'), ['class' => 'btn btn-success submit' , 'data-key' => $key]);
  

• Назначьте идентификатор для GridView, который я использую mygrid.

• Переместите созданную нами новую кнопку в столбец действий из столбца данных, ваш код

  будет выглядеть следующим образом

  [
      'class' => 'yii\grid\ActionColumn',
      'template' => '{remove} | {save} {submitRow}',
      'buttons' => [
          'submitRow' => function ($url, $model, $key) {
              return Html::button('Submit', ['class' => 'btn btn-success submit', 'data-key' => $key]);
          },
          'remove' => function ($url, $model, $key) {
              return Html::a(
                  '<span class="glyphicon glyphicon-remove text-danger"></span>',
                  ['list-profile/index', 'rem_id' => $model->id, 'name' => Yii::$app->request->get('name')],
                  [
                      'title' => Yii::t('app', 'Remove from profile'),
                  ]
              );
          },
      ],
      'contentOptions' => ['style' => 'min-width: 80px;text-align: center;'],
  ],
  

• Добавьте следующий скрипт в верхней части вашего представления

  $js = <<<JS
  $('.submit').click(function(){
  
      //get the row key from target button
      var rowNum=$(this).data('key');
  
      var data={};
  
      //add the id to the collection for update
      data["id"]=rowNum;
  
      //collect the inputs data from the td inside the row
  
      $('#mygrid table').find('[data-key="'+rowNum+'"]').find('td').each(function(){
          $(this).find('input').each(function(){
              data[$(this).attr('name')]=$(this).val();
          });
      });
  
      //send an ajax call
      $.ajax({
          url:'list-profile/resort',
          method:'post',
          data:data,
          success:function(response){
              alert(response);
          },
          error: function (XHR, status, error) {
              alert("Oops! Status " + status + " returned with error "+error);
          }
      });
  });
  JS;
  
  $this->registerJs($js, \yii\web\View::POS_END);
  ?>
  

Как только вы это сделаетевыше ваши данные будут в массиве post, и вы можете получить его как

Yii::$app->request->post('sort')

Answer 2

Вы можете удалить beginForm. И сделайте следующее:

1 - изменить:

return Html::textInput("sort",$data->no,array("style"=>"width:40px;"));

до:

return Html::textInput($data->no,$data->no,array("style"=>"width:40px;"));

2 - изменить:

return Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success']);

до:

return Html::a('list-profile/resort', 'send', ['class' => 'btn btn-success','id' => $data->no,]);

Затем добавьте код:

<?php
$script = <<< JS
$(document).on('click', 'a', function(){
    event.preventDefault();
    var key =$(this).attr('no');
    var dat = $('input[name='+key+']').val();
    $.post("list-profile/resort",
    {
      'textinput' : dat
    },
    function(data,status){
        alert("Data: " + data + "Status: " + status);
    });
});
JS;
$this->registerJs($script);
?>

---

Если вы хотите сделать через Ajax:

 $.ajax({
url: 'list-profile/resort',
 type: 'POST',
data: {'textinput' : dat },
 success:function(result){
 alert(dat)
 },
 error: function(){
 alert('Error!')
 }
 });

---

Если вы хотите начать с beginForm? (не удаляйте beginForm и submitButton)

return Html::textInput($data->no,$data->no,array("style"=>"width:40px;"));

return Html::submitButton(Yii::t('app', 'Save'), ['class' => 'btn btn-success','id' => $data->no]);

$('form').find(':submit').on('click', function(event) {
    // Prevent default anchor click behavior
    event.preventDefault();

    var key =$(this).attr('no');
    var dat = $('input[name='+key+']').val();
        $.post("list-profile/resort",
        {
          'textinput' : dat
        },
        function(data,status){
            alert("Data: " + data + "Status: " + status);
        });
});

Для URL вы также можете использовать следующий код в JS:

 var url= $(this).attr('href');