jquery - Yii 2 GridView访问当前行及其列内容并通过ajax更新行

Question

我有一个 Yii2 gridview。我有一个列，里面有一个复选框，默认情况下处于选中状态。当选中/取消选中该复选框值时，我想更改该值，例如(减去 10)在另一列(即总计列)内，如下所示。

 echo GridView::widget([
    'dataProvider' => $model->getInsuredCompanyVehiclesArrayDataProvider(),
    'filterModel' => $model->getInsuredCompanyVehiclesArrayDataProvider(),
    'columns' => [


                    [
                            'label' => "checkbox-1-col",
                            'format' => 'raw',
                            'value' => function($data)
                            {
                                return Html::checkbox('chk1', true, ["page/update", "id" => $data->id]);
                            },
                            ],

                    [
                            'label'=>'Total',
                            'format' => 'raw',
                            'value'=>function ($data) {
                                return $total;

                            },
                    ],



                 ],
]);

我在访问当前行单元格/列值时遇到问题。我们将不胜感激您的帮助。

Answer 1

我终于找到了一个解决方案，使用 Jquery 获取 GridView 行和列，并使用 PJax 进行 ajax 更新(适用于 Yii2)。下面是工作代码:

    echo GridView::widget([
    'dataProvider' => $model->getInsuredCompanyVehiclesArrayDataProvider(),
    'filterModel' => $model->getInsuredCompanyVehiclesArrayDataProvider(),
    'id'=>'gridID', // ID to grid wrapper
    //'enableHistory' => true,
    //'selectableRows' => 1,
    'columns' => [


            // generated by schmunk42\giiant\crud\providers\RelationProvider::columnFormat
            [
            "class" => yii\grid\DataColumn::className(),
            "attribute" => "insurance_company_id",
            //'name' => "companyName",
            'label'=>'Company Name',
            "value" => function($data){
                if ($rel = $data->getInsuranceCompany()->one()) {
                    return "<img class=\"media-object\" src=\"" . Yii::$app->view->theme->baseUrl . "/images/efu.jpg\" alt=\"\"> " . $rel->name;
                } else {
                    return '';
                }
            },
            "format" => "raw",
            ],


            [
            'label'=>'Rate',
            'format' => 'raw',
            'value'=>function ($data) {

                return $data->rate . '%';

            },
            ],

            [
                    'label'=>'Cover Detail',
                    'format' => 'raw',
                    'value'=>function ($data) {

                        return "<a href='" .  $data->cover_detail . "' target='_blank'>Click Here</a>";

                    },
                    ],

                    // generated by schmunk42\giiant\crud\providers\RelationProvider::columnFormat
                    [
                    "class" => yii\grid\DataColumn::className(),
                    "attribute" => "models_id",
                    'label'=>'Model',
                    "value" => function($model){
                        if ($rel = $model->getModels()->one()) {
                            return $rel->name;
                        } else {
                            return '';
                        }
                    },
                    "format" => "raw",
                    ],


                    [
                            'label' => Vas::findOne(1)->name,
                            'format' => 'raw',
                            //'name' => "vas1",
                            'value' => function($data)
                            {
                                return Html::checkbox('vas1', true, [ "id" => "vas1",'value' => Vas::findOne(1)->fee]);

                            },
                    ],

                    [
                            'label' => Vas::findOne(2)->name,
                            'format' => 'raw',
                            //'name' => "vas2",
                            'value' => function($data)
                            {
                                return Html::checkbox('vas2', true, [ "id" => "vas2",'value' => Vas::findOne(2)->fee]);
                            },
                    ],

                    [
                                'label'=>'Year',
                                'format' => 'raw',
                                'value'=>function ($data) {
                                    return $data->year_manufactured;
                            },
                    ],

                    [
                    'label'=>'Amount',
                    'format' => 'raw',
                    'value'=>function ($data) {

                        return $data->rate * Yii::$app->session->get('motorInsuranceEntry')->sumInsured/100;

                    },
                    ],

                    [
                            'label'=>'Total',
                            'format' => 'raw',
                            'value'=>function ($data) {
                            //'value'=>function ($data, $row,$grid) {
                                //$amount = $data->rate * Yii::$app->session->get('motorInsuranceEntry')->sumInsured/100;
                                $amount = Yii::$app->session->get('motorInsuranceEntry')->sumInsured/100;
                                $total = $amount + Vas::findOne(1)->fee + Vas::findOne(2)->fee;
                                //print_r( $grid);
                                //var_dump($model, $key, $index, $column);
                                return $total;

                            },
                    ],

                    [
                    'label'=>'-',
                    'format' => 'html',
                    'value'=>function ($data) {
                                $amount = Yii::$app->session->get('motorInsuranceEntry')->sumInsured/100;
                                $total = $amount + Vas::findOne(1)->fee + Vas::findOne(2)->fee;

                        return "<a href='motor-insurance-confirm?company=" . $data->getInsuranceCompany()->one()->name . 
                                "&rate=" . $data->rate .
                                "&ccover=yes&ccar=yes&cd=" . $data->cover_detail .
                                "&amount=" . $data->rate * Yii::$app->session->get('motorInsuranceEntry')->sumInsured/100 .
                                "&total=" . $total . 
                                "'>Buy</a>";

                    },
                    ],



                 ],
]); ?>

                     <script>

                    $('#gridID  table tbody tr').click(function()
                     {
                     var vas1Fee=0, vas2Fee=0;
                     var vasParams = "", vas1Param="&ccover=yes", vas2Param="&&ccar=yes", buyLink = "";
                    $this=$(this);    
                    var firstColVal= $this.find('td:first-child').text();
                    //var secondColVal= $this.find('td:nth-child(2)').text();


var chk = $(this).closest('tr').find('input:checkbox');
var rate = $this.find('td:nth-child(2)').text().substring(0, $this.find('td:nth-child(2)').text().length - 1);
var amount = parseInt($this.find('td:nth-child(8)').text());
var total = parseInt($this.find('td:nth-child(9)').val()); 
var cd = $this.find('td:nth-child(3)').html();

cd = cd.match("href=\"(.*?)\""); // returns array

if(chk[0].checked) {
    //alert("1 - condition");
    vas1Fee = parseInt($('#vas1').attr('value'));
    vas1Param="&ccover=yes";
}
else
{
    vas1Param="&ccover=no";
}

if(chk[1].checked)
{
    //alert("2 - condition");
    vas2Fee = parseInt($('#vas2').attr('value'));
    vas2Param="&&ccar=yes";
}
else
{
    vas2Param="&&ccar=no";
}

vasParams = vas1Param + vas2Param;
total = amount + vas1Fee + vas2Fee;

buyLink +=  "<a href=\'motor-insurance-confirm?company=" + $this.find('td:first-child').text() + "&rate=" + rate  + vasParams +     
"&cd=" +  cd[1] + "&amount=" + amount.toString() + "&total=" + total + "\'>Buy</a>";

//alert(buyLink);


//alert("amount : " + amount + " vas1Fee : " + vas1Fee + " vas2Fee : " + vas2Fee + " TOTAL : " + total);    
$this.find('td:nth-child(9)').text(total.toString());
$this.find('td:last-child').html(buyLink);
//var lastColVal= $this.find('td:last-child').text();

$.pjax.reload({container:'#pjaxID'});

});