如何在 gridview 中只为一行发送 POST

Question

我正在创建 table，客户可以根据需要对记录进行排序。如何 POST 整个 table 中只有一行？

我已经尝试将整个 GridView table 包装到表格中，结果是当我提交时，整个 table 得到了 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();?>

这是 table 的图片：

Picture of table

Answer 1

您可以删除 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');

Answer 2

有一个 data-key 属性将行与 Gridview 您可以使用它来定位特定行并收集输入。

那你为什么要在 Data 列中分配一个按钮你应该把它放在 Action 列中而不是为了这个目的。

要做的事情

您应该首先将Html::submitButton()更改为普通按钮并添加一个class 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 分配一个 ID 我正在使用 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')

如何在 gridview 中只为一行发送 POST

How to send POST for only one row in gridview

php

gridview

yii2

要做的事情