解决方案

Question

我有一个视图，其中有两个按钮。单击两个按钮中的任何一个时，都会发出特定请求。

查看

<?php Pjax::begin(); ?>
        <?=Html::beginForm(['process'],'post');?>
        <?=Html::submitButton('Disconnect', ['id'=>'d','name'=>'dco','class' => 'btn btn-primary']);?>
        <?=Html::submitButton('Connect', ['id'=>'r','name'=>'rco','class' => 'btn btn-info']);?>
        <br><br>
        <div class="pre-scrollable">
        <?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [


        ['class' => 'yii\grid\CheckboxColumn', 'checkboxOptions' => function($d) {
            return ['value' => $d['msn']];
        }],


        'customer_id',
       // 'dept_code:ntext',
        'dept_name:ntext',
        'sub_div_name',
        [
            'label' => 'Sub Division Name',
            'value' => function ($d) {
                return $d->subdiv->name;
            },
            'filter' => Html::activeDropDownList($searchModel, 'sub_div_code', \common\models\SurveyHescoSubdivision::toArrayList(), ['prompt' => "Sub-Div", 'class' => 'form-control']),

        ],
        'division_name',
        'allowed_units',
        'msn',

        'units_consumed',
        [
            'label' => 'Disconnected',
            'attribute' => 'disconnected',
            'format'=>'raw',
            'contentOptions' => ['style'=>'text-align:center'],
            'value' => function($model){
                return $model->disconnected == 1 ? '<span class="glyphicon glyphicon-ok text-success"></span>' : '<span class="glyphicon glyphicon-remove text-danger"></span>';
            },
            'filter' => Html::activeDropDownList($searchModel, 'disconnected', [''=>'All','1'=>'Yes','0'=>'No'], ['class' => 'form-control']),
        ],


        'active_energy_total_m',


        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>
        </div>
        <?= Html::endForm();?>
        <?php Pjax::end(); ?>

控制器

 public function actionProcess()
{

 $soapUrl = "http://ip:port/HES/services/Request";
    $userName = "user";
    $password = "123456";

 if (isset($_POST['dco'])) 
    {
        if(Yii::$app->request->isPost)
        {
            $data = Yii::$app->request->post('selection'); //checkbox (array)


            foreach($data as $value)
            {

                $msn = $value;


                $xml_post_string = /** @lang text */
                    '//soap request';

                $headers = array(
                    "Content-type: text/xml;charset=\"utf-8\"",
                    "Accept: text/xml",
                    "Cache-Control: no-cache",
                    "Pragma: no-cache",
                    "Content-length: ".strlen($xml_post_string),
                ); //SOAPAction: your op URL

                $url = $soapUrl;

                // PHP cURL  for https connection

                $ch = curl_init();
                curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 1);
                curl_setopt($ch, CURLOPT_URL, $url);
                curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

                curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
                curl_setopt($ch, CURLOPT_TIMEOUT, 10);
                curl_setopt($ch, CURLOPT_POST, true);
                curl_setopt($ch, CURLOPT_POSTFIELDS, $xml_post_string); // the SOAP request
                curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

                // converting
                $response = curl_exec($ch);
                curl_close($ch);
                $domd=new DOMDocument();

                var_dump($response);
                if(!$domd->loadXML($response)){
                    throw new \RuntimeException("failed to parse XML!");
                }
                $inner_xml=$domd->getElementsByTagName("return")->item(0)->textContent;
                if(!($domd2=@DOMDocument::loadXML($inner_xml))){
                    throw new \RuntimeException("failed to parse inner_xml!");
                }
                $AsyncReplyFlag=$domd2->getElementsByTagName("AsyncReplyFlag")->item(0)->textContent;

                if ($AsyncReplyFlag =='true')
                {
                    $ds = 1;

                    $disconnected_at = date('Y-m-d H:i:s');

                    try {
                        Yii::$app->db->createCommand(/** @lang text */
                            "update 
  `accurate_mam`.`daily_log` 
set
  `disconnected` = '$ds',
  `diconnected_at` = '$disconnected_at', 
  `reconnected_at` = NULL
where `msn` = '$msn' ;

")->execute(); //update master table

                        Yii::$app->db->createCommand(/** @lang text */
                            "update 
                        `accurate_mam`.`log_disconnected` 
                         set

                        `disconnected_at` = '$disconnected_at' 
                         where `msn` = '$msn'")->execute();// update log disconnected table
                    } catch (Exception $e) {
                    } // updating the master table
                }


            }

        }
    }
    }

我想做什么？

单击按钮时，我想显示一个微调器/装载器，它将在发出请求时启动，并在请求完成时停止。

注意

我不想为微调器/加载器添加默认时间。它应在发送请求后开始，并在请求完成后即过程结束时停止

我搜索了很多文章，但是找不到完整的实现细节。

更新1

我找到了解决方案here，并尝试执行以下操作

<style>
#loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.05) url("<?php \yii\helpers\Url::to('@web/images/25.png', true);  ?>") no-repeat center center;
    z-index: 10000;
}
</style>

JS

$(document).ready(function () { 

      $('form').submit(function(e) {
       e.preventDefault();      

        spinner.show();
        $.ajax({
            url:'$url',
            data: $(this).serialize()
            type: 'POST',
            dataType: 'JSON'
        }).done(function(resp) {
            spinner.hide();
          //alert(resp.status);
        });

  });      


});

面临的问题

现在我可以看到微调器，但是该过程尚未完成。经过进一步调试后，我发现在提交请求时，我在bool(false)中得到了var_dump(isset($_POST['dco'])); die();

更新2

我发现了另外一个solution，并试图做同样的事情

更新两个按钮

<?= Html::submitButton(Yii::t('app', '<i class="fa fa-times"></i>&nbsp;Disconnect'), ['class' => 'btn red', 'name' => 'dco', 'value' => '0']) ?>
<?= Html::submitButton(Yii::t('app', '<i class="fa fa-check"></i>&nbsp;Connect'), ['class' => 'btn blue', 'name' => 'rco', 'value' => '1']) ?>

JS

 $('form').submit(function(e) {
       e.preventDefault();
        var strValue = "";        
    $('input[name="selection[]"]:checked').each(function() {

    if(strValue!=="")
        {
        strValue = strValue + " , " + this.value;

        }
    else 
       strValue = this.value;     

});


        spinner.show();
        $.ajax({
            url:'$url',
            data: {data :strValue},
            type: 'POST',
            dataType: 'JSON'
        }).done(function(resp) {
            spinner.hide();
          //alert(resp.status);
        });

  });

控制器

if (Yii::$app->request->post()) {

   if (Yii::$app->request->post('dco') == 0) {
    //Code for value 0
 }

   if (Yii::$app->request->post('rco') == 1) {
    //Code for value 1
  }

 }

面临的问题

当我单击两个按钮中的任何一个时，它总是会打dco复选框，即if (Yii::$app->request->post('dco') == 0)不会达到rco条件

肯定有我缺少的东西。

任何帮助将不胜感激。

Answer 1

<?php
$this->registerJs(<<<JS
$(document).on('pjax:send', function() {
   $('#loading').show();
});
$(document).on('pjax:complete', function() {
  $('#loading').hide();
});
JS
);
?>

示例：带有fontawesome（或可以使用图片...。）

<i id='loading' class='fa fa-spinner fa-pulse' style='display:none;'></i>

您也可以通过变量（在控制器中）执行此操作。

Answer 2

我的理解

查看您当前的实现，尽管包装在Pjax容器中，但您仍在使用常规表单提交，但是您尚未为表单启用通过Pjax的表单提交，而是想显示一个旋转器或加载器会一直显示，直到您将curl请求发送到某个API的操作请求完成为止。

限制

您需要了解的是，如果您要进行常规表单提交并尝试为您在controller/action内部执行的某些过程显示微调器，则该视图将无法工作，因为该视图尚未呈现，并且您的与任何javascript或CSS相关的微调框尚未在浏览器中呈现，也不会显示。

解决方案

另一方面，如果您已经使用ajax或pjax进行表单提交，因为您已经将表单包装在Pjax容器中，则可以使用Pjax从AdminBSBTheme中启用微调器的事件，该事件仅使用CSS来显示微调器。

这不仅适用于您的Ajax表单，而且您可以在网站上整体使用它来进行正常的页面加载，从而获得不错的效果。 DOM准备好后，它会自动隐藏，以防互联网连接速度变慢，使一切看起来更加对齐。

在表单上启用Pjax

您必须在form标记中添加data-pjax="1"属性以启用Pjax表单提交，默认情况下它不起作用，因此请继续并更改以下行以启用Pjax提交表格。

<?php echo Html::beginForm(['process'],'post', ['data' => ['pjax' => 1]);?>

为Pjax启用超时

然后，如果您的timeout请求花费一些时间，则需要指定curl参数属性，最好为timeout属性添加高值，这样它就不会抛出loading request failed或timeout错误，然后等待响应。让我们给它10 seconds，因此如果请求占用10 secs才能完成，则应继续等待，否则，如果收到响应，则继续

<?php Pjax::begin(['timeout'=>10000]); ?>

Spinner集成

现在是微调器集成的一部分，您可以在下面的演示中看到它正在运行，它是基于纯CSS的。

在Html之后，将下面的演示中的views\layouts\main.php复制到您的$this->beginBody()文件中，然后在您的css文件中添加site.css，或者创建一个单独的文件并包含在AppAssets.php文件中。

/ Page Loader ================================= /

.page-loader-wrapper {
  z-index: 99999999;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #eee;
  overflow: hidden;
  text-align: center;
}

.page-loader-wrapper p {
  font-size: 13px;
  margin-top: 10px;
  font-weight: bold;
  color: #444;
}

.page-loader-wrapper .loader {
  position: relative;
  top: calc(50% - 30px);
}


/ Preloaders ================================== /

.md-preloader .pl-red {
  stroke: #F44336;
}

.md-preloader .pl-pink {
  stroke: #E91E63;
}

.md-preloader .pl-purple {
  stroke: #9C27B0;
}

.md-preloader .pl-deep-purple {
  stroke: #673AB7;
}

.md-preloader .pl-indigo {
  stroke: #3F51B5;
}

.md-preloader .pl-blue {
  stroke: #2196F3;
}

.md-preloader .pl-light-blue {
  stroke: #03A9F4;
}

.md-preloader .pl-cyan {
  stroke: #00BCD4;
}

.md-preloader .pl-teal {
  stroke: #009688;
}

.md-preloader .pl-green {
  stroke: #4CAF50;
}

.md-preloader .pl-light-green {
  stroke: #8BC34A;
}

.md-preloader .pl-lime {
  stroke: #CDDC39;
}

.md-preloader .pl-yellow {
  stroke: #ffe821;
}

.md-preloader .pl-amber {
  stroke: #FFC107;
}

.md-preloader .pl-orange {
  stroke: #FF9800;
}

.md-preloader .pl-deep-orange {
  stroke: #FF5722;
}

.md-preloader .pl-brown {
  stroke: #795548;
}

.md-preloader .pl-grey {
  stroke: #9E9E9E;
}

.md-preloader .pl-blue-grey {
  stroke: #607D8B;
}

.md-preloader .pl-black {
  stroke: #000000;
}

.md-preloader .pl-white {
  stroke: #ffffff;
}

.preloader {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  -webkit-animation: container-rotate 1568ms linear infinite;
  -moz-animation: container-rotate 1568ms linear infinite;
  -o-animation: container-rotate 1568ms linear infinite;
  animation: container-rotate 1568ms linear infinite;
}

.preloader.pl-size-xl {
  width: 75px;
  height: 75px;
}

.preloader.pl-size-l {
  width: 60px;
  height: 60px;
}

.preloader.pl-size-md {
  width: 50px;
  height: 50px;
}

.preloader.pl-size-sm {
  width: 40px;
  height: 40px;
}

.preloader.pl-size-xs {
  width: 25px;
  height: 25px;
}

.spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-color: #F44336;
  -ms-opacity: 1;
  opacity: 1;
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  -moz-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  -o-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.spinner-layer.pl-red {
  border-color: #F44336;
}

.spinner-layer.pl-pink {
  border-color: #E91E63;
}

.spinner-layer.pl-purple {
  border-color: #9C27B0;
}

.spinner-layer.pl-deep-purple {
  border-color: #673AB7;
}

.spinner-layer.pl-indigo {
  border-color: #3F51B5;
}

.spinner-layer.pl-blue {
  border-color: #2196F3;
}

.spinner-layer.pl-light-blue {
  border-color: #03A9F4;
}

.spinner-layer.pl-cyan {
  border-color: #00BCD4;
}

.spinner-layer.pl-teal {
  border-color: #009688;
}

.spinner-layer.pl-green {
  border-color: #4CAF50;
}

.spinner-layer.pl-light-green {
  border-color: #8BC34A;
}

.spinner-layer.pl-lime {
  border-color: #CDDC39;
}

.spinner-layer.pl-yellow {
  border-color: #ffe821;
}

.spinner-layer.pl-amber {
  border-color: #FFC107;
}

.spinner-layer.pl-orange {
  border-color: #FF9800;
}

.spinner-layer.pl-deep-orange {
  border-color: #FF5722;
}

.spinner-layer.pl-brown {
  border-color: #795548;
}

.spinner-layer.pl-grey {
  border-color: #9E9E9E;
}

.spinner-layer.pl-blue-grey {
  border-color: #607D8B;
}

.spinner-layer.pl-black {
  border-color: #000000;
}

.spinner-layer.pl-white {
  border-color: #ffffff;
}

.right {
  float: right !important;
}

.gap-patch {
  position: absolute;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.gap-patch.circle {
  width: 1000%;
  left: -450%;
}

.circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.circle-clipper .circle {
  width: 200%;
  height: 100%;
  border-width: 3px;
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: none;
  animation: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.circle-clipper.left .circle {
  left: 0;
  border-right-color: transparent !important;
  -webkit-transform: rotate(129deg);
  -moz-transform: rotate(129deg);
  -ms-transform: rotate(129deg);
  -o-transform: rotate(129deg);
  transform: rotate(129deg);
  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  -moz-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  -o-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.circle-clipper.right .circle {
  left: -100%;
  border-left-color: transparent !important;
  -webkit-transform: rotate(-129deg);
  -moz-transform: rotate(-129deg);
  -ms-transform: rotate(-129deg);
  -o-transform: rotate(-129deg);
  transform: rotate(-129deg);
  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  -moz-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  -o-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes container-rotate {
  to {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  25% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  37.5% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
  50% {
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
  }
  62.5% {
    -webkit-transform: rotate(675deg);
    transform: rotate(675deg);
  }
  75% {
    -webkit-transform: rotate(810deg);
    transform: rotate(810deg);
  }
  87.5% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg);
  }
  to {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }
}

@keyframes fill-unfill-rotate {
  12.5% {
    transform: rotate(135deg);
  }
  25% {
    transform: rotate(270deg);
  }
  37.5% {
    transform: rotate(405deg);
  }
  50% {
    transform: rotate(540deg);
  }
  62.5% {
    transform: rotate(675deg);
  }
  75% {
    transform: rotate(810deg);
  }
  87.5% {
    transform: rotate(945deg);
  }
  to {
    transform: rotate(1080deg);
  }
}

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg);
  }
}

@keyframes left-spin {
  from {
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
  50% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
}

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  to {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
}

@-moz-keyframes right-spin {
  from {
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
  50% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  to {
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
}

@keyframes right-spin {
  from {
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
  50% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  to {
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
}

<!-- Page Loader -->
<div class="page-loader-wrapper">
  <div class="loader">
    <div class="preloader">
      <div class="spinner-layer pl-red">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>
    </div>
    <p>Please wait...</p>
  </div>
</div>
<!-- #END# Page Loader -->

然后在views\layouts\main.php文件顶部添加以下内容

$js = <<<JS
     setTimeout(function () {
        $('.page-loader-wrapper').fadeOut();
    }, 50);
JS;
$this->registerJs($js, \yii\web\View::POS_READY);

注意：理想情况下，您可以将与微调框相关的所有内容包装在单独的资产文件中，并在主布局中调用它，但我将把这一部分留给您。

在这一点上，如果您尝试单击应用程序上的任何链接，您将看到微调器可用于正常页面加载，例如主页或其他页面。

启用Pjax请求

我们也需要为Pjax启用它，因此请转到您的view文件，并在顶部添加以下使用pjax:beforeSend事件显示微调框的JavaScript，< / p>

$js = <<<JS
$(document).on("pjax:beforeSend",function(){
    $('.page-loader-wrapper').fadeIn();
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);

您不必担心会关闭微调器，一旦通过我们的主布局代码在curl响应后加载页面，该微调器就会关闭。

更新

使用pjax时未提交提交按钮值的原因是一个已知问题，请参见here。您可以做的就是为2个提交按钮添加2个隐藏字段，并在单击时更新与该按钮关联的各个隐藏字段的值，并将它们与表单一起提交并检查那些新的隐藏输入的值，因此您可以确定单击了哪个按钮。

因此，首先我们将添加隐藏的输入，请注意用于原始submitButton rco和dco id的选项应该在其中。

<?php echo Html::beginForm(['about'], 'post', ['data' => ['pjax' => 1]]); ?>
<?php echo Html::submitButton('Disconnect', ['class' => 'btn btn-success', 'id' => 'dco']) ?>
<?php echo Html::submitButton('Connect', ['class' => 'btn btn-info', 'id' => 'rco']) ?>
<?php echo Html::hiddenInput('dco', '', ['id' => 'dco_input']); ?>
<?php echo Html::hiddenInput('rco', '', ['id' => 'rco_input']); ?>

现在，我们将替换以下在视图中添加的javascript

$js = <<<JS

    function loader(){
        $('.page-loader-wrapper').fadeOut();
        //reset the input values
        $("#dco_input,#rco_input").val('');

        //assign respective values to the associated hidden fields
        $("#rco,#dco").on('click',function(e){
            var buttonId = $(this).attr('id');
            $("#"+buttonId+"_input").val(1);
        });
    }

    $(document).on("pjax:beforeSend",function(e){
        $('.page-loader-wrapper').fadeIn();
    }).on("pjax:end",function(){
        loader();
    });
    loader();
JS;
    $this->registerJs($js, View::POS_READY);
?>

现在，每当我们单击dco提交按钮时，隐藏的输入dco_input就会被填充1，并且当单击rco提交按钮时rco_input会在提交for之前用值1更新，并且您将在两个按钮的发布中收到该值。

您最后需要更改的是控制器/操作process()中的检查，这些检查正在检查isset($_POST['dco'])和isset($_POST['rco'])，它们将不起作用并且需要更新

if(isset($_POST['dco']))

与

if(isset($_POST["dco"]) && $_POST['dco']==1)

和

if(isset($_POST['rco']))

与

if(isset($_POST['rco']) && $_POST['rco']==1)

Answer 3

测试以下代码。您对使用此代码的看法可能是肯定的。（需要 fontawesome -不需要数据库）
对于邮件，已使用Alert :: widget
注意： fontawesome用于装载机/旋转器。

信息：查看文件：grid.php
在视图中 ：（例如，文件夹站点-grid.php）

<?php
use yii\helpers\Html;
use yii\widgets\Pjax;
use yii\grid\GridView;
use yii\bootstrap\Alert;
?>

<div class="">
<?php Pjax::begin(['formSelector' => '#bill', 'enablePushState' => false,'clientOptions' => ['method' => 'POST']]);  ?>
   <div class="row">
        <div class="col-xs-12">
            <?php foreach (Yii::$app->session->getAllFlashes() as $type => $message): ?>
                <?php if (in_array($type, ['success', 'info'])): ?>
                    <?= Alert::widget([
                        'options' => ['class' => 'alert-dismissible alert-' . $type],
                        'body' => $message
                    ]) ?>
                <?php endif ?>
            <?php endforeach ?>
        </div>
    </div>
<?=Html::beginForm(['grid'],'post',['id' => 'bill','data-pjax' => '']); ?>

<?= Html::dropDownList('action','',[ 'Connect' =>'Connect','Disconnect' =>'Disconnect'],['prompt' => 'Please select','class'=> 'field-black input-sm']) ?>
<?= Html::submitButton('Apply', ['class' => 'btn btn-success','style'=>'margin:0 10px;']) ?>
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [

        ['class' => 'yii\grid\CheckboxColumn', 'checkboxOptions' => function($data) {    return ['value' => $data['id']]; }],

        'id',
        'customer_id',

        [
            'label' => 'connect',
            'attribute' => 'connect',
            'format'=>'raw',
            'contentOptions' => ['style'=>'text-align:center'],
            'value' => function($model){
                return $model['connect'] == 1 ? '<span class="glyphicon glyphicon-ok text-success"></span>' : '<span class="glyphicon glyphicon-remove text-danger"></span>';
            },
        ],

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>
<?= Html::endForm();?> 
<?php Pjax::end() ?>
<div style="text-align: center;"><i id='loading' class='fa fa-spinner fa-pulse' style='font-size: 75px; display:none;'></i></div>

</div>

<?php
$this->registerJs(<<<JS
$(document).on('pjax:send', function() {
   $('#loading').show();
});
$(document).on('pjax:complete', function() {
  $('#loading').hide();
});
JS
);
?>

在控制器中 ：（例如，SiteController-actionGrid()）

public function actionGrid()
{
    $list_check = [
         11 => ['id' => 1,'customer_id'=>'customer a','connect'=> 1],
         12 => ['id'=> 2, 'customer_id'=>'customer b','connect'=> 1],
         13 => ['id'=> 3, 'customer_id'=>'customer c','connect'=> 0],
      ];

    $dataProvider = new \yii\data\ArrayDataProvider(['allModels' => $list_check, 'key' => 'id', 'pagination' => ['pageSize' => 2]]);

  if ( \Yii::$app->request->post() ) {
      $sen = \Yii::$app->getSession();
      $arr_select=(array)Yii::$app->request->post('selection');  //An array of selected items (checkbox)
      $_action=Yii::$app->request->post('action'); // dropDown

      if ($_action === 'Connect') {
          //code for Disconnect here ($query).  // example:  $modelTest::updateAll(['disconnected' => 1], ['msn' => $arr_select]);
          $sen->setFlash('success', \Yii::t('user', '<span class="text-primary">Connect</span> successful')); 

      } elseif ($_action == 'Disconnect') {
          //code for Connect here ($query)
          $sen->setFlash('info', \Yii::t('user', '<span class="text-danger">Disconnect</span> successful'));
      }
    }
    return $this->render('grid', ['dataProvider' => $dataProvider]);
}

然后转到地址.../site/grid

向yii2界面添加加载程序/微调器

3 个答案:

我的理解

限制

解决方案