Question

我有GridView显示员工工资单，并且每个名称旁边都有复选框。请参考下图：

enter image description here

如您所见，我还有一个下拉列表。我在我的jQuery中设置它以选择列表中的最后一个孩子，即 2015年4月10日 - 2015年4月16日选项。在页面加载时，我可以看到这个复选框的页面（上面的照片）。我的复选框有问题，因为当我单击标题复选框时，它应该选中它下面的所有复选框。但事实并非如此。现在，当我尝试在下拉列表中选择其他选项时，我得到的是：

enter image description here

复选框的样式会发生变化。现在，当我选中标题复选框时，它已经正常工作，选中下面的每个复选框。

以下是我如何显示下拉列表：

echo Select2::widget([
    'name' => 'period',
    'data' => $period,
    'options' => [
        'placeholder' => 'Select period', 
        'id' => 'period',
        'style' => 'width: 400px; height: 34px;'
    ],
    'pluginOptions' => [
        'maximumInputLength' => 10,
    ],
]);

GridView的：

<?php \yii\widgets\Pjax::begin(['id' => 'employee']); ?>
<?php   
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        //'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            ['class' => 'yii\grid\CheckboxColumn',
                'options' => ['class' => 'icheckbox_minimal',]

            ],
                'fname',
                'lname',
                'totalEarnings',
                'totalDeductions',
                'netPay',
            [    
                'label' => 'Action',    
                'content' => function ($model, $key, $index, $column) {
                    if ($model->netPay != null) {
                        return Html::a('View Payslip', ['view' , 'id' => $model->payslipID], ['class' => 'btn btn-success']);
                    }else{
                        return Html::a('Create Payslip', ['create-new', 'id' => $model->user_id], ['class' => 'btn btn-warning']);
                    }
                }
            ]
        ],
    ]); 
?>
<?php \yii\widgets\Pjax::end(); ?>

脚本：

<script>
$(document).ready(function(){
    $("#period option:last-child").attr('selected', 'selected');

    $("#period").change( function()
    {
        var period = $('#period').val();

        if(period != 0){
            $.ajax({
                url: 'index.php?r=payslip/periods',
                dataType: 'json',
                method: 'GET',
                data: {id: period},
                success: function (data, textStatus, jqXHR) {
                    $.pjax.reload({container:'#employee'});
                    //alert(data.start);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log('An error occured!');
                    alert('Error in ajax request');
                }
            });
        }
    }
    );
})
</script>

我的问题是，如何保留/维护复选框的样式？为什么它会改变风格？为什么样式的复选框不起作用？

Answer 1

您的复选框已使用javascript更改，看起来就是这样你有两个问题：
1）你的“全部检查”功能工作正常，你只需要刷新复选框的状态。它的工作方式如下：当您单击替换复选框的div时，复选框将在其下更改。你的问题是你用脚本检查它，所以你需要触发位于它上面的div也要改变它。 2）因为你使用pjax你的页面DOM被改变了。但是，由于您可能更改了页面“onload”上的复选框，因此新复选框保持不变。您需要运行在pjax调用后再次更改它们的函数。

Yii2复选框更改样式

1 个答案: