我有一个视图,其中有两个按钮。单击两个按钮中的任何一个时,都会发出特定请求。
查看
<?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> Disconnect'), ['class' => 'btn red', 'name' => 'dco', 'value' => '0']) ?>
<?= Html::submitButton(Yii::t('app', '<i class="fa fa-check"></i> 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
条件
肯定有我缺少的东西。
任何帮助将不胜感激。
答案 0 :(得分:0)
<?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>
您也可以通过变量(在控制器中)执行此操作。
答案 1 :(得分:0)
查看您当前的实现,尽管包装在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)
答案 2 :(得分:0)
测试以下代码。您对使用此代码的看法可能是肯定的。(需要 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