Modal e Coluna Editavel está em conflito com Grid dentro de linha expansiva.
145 views
Skip to first unread message
Dyego Gustavo
Feb 6, 2017, 8:29:15 AM2/6/17
to YFB - Yii Framework Brasil
Pessoal essa é minha primeira aplicação usando o Yii2 e está sendo uma ótima experiência, estou enfrentando vários desafios. Estou usando um Grid dentro da linha expansiva de outro Grid, só que as funções que coloco no Grid de detalhes só funcionam na primeira linda de registro as outras ficam com problema. Por exemplo: Estou chamando modal quando clica em editar o registro do Grid detalhe, porém o modal funciona normal no primeiro registro e só funciona nos demais registros se a primeira linha estiver expandida.
Outro conflito: Resolvi então usar o Yii2-editable para editar os registro do grid detalhe nele mesmo, já o modal não tinha conseguido resolver, porém o editable só funciona na primeira linha expandida.
Segue o código.
gridDespacho (Grid Principal)
gridArea (Grid Detalhe da Grid Área)
main.js (Chamando as modais)
Primeira imagem: Quando clica em EDITAR o registro da segunda linha em diante e a primeira linha não está expandida só aparece esse div e o modal não aparece. Se a primeira linha estiver expandida, o modal aparece normalmente.
Segunda Imagem: Quando clica para editar o registro da segunda linha expansiva pra baixo acontece isso, e o dado que aparece para editar é sempre o da primeira linha, mesmo ela recolhida.
Outro conflito: Resolvi então usar o Yii2-editable para editar os registro do grid detalhe nele mesmo, já o modal não tinha conseguido resolver, porém o editable só funciona na primeira linha expandida.
Segue o código.
gridDespacho (Grid Principal)
<?php
use kartik\detail\DetailView;
use kartik\grid\GridView;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\Modal;
use yii\helpers\Json;
use app\models\Area;
use app\models\AreaSearch;
//use kartik\datecontrol\DateControl;
/**
* @var yii\web\View $this
* @var app\models\Projeto $model
*/
$this->title='Detalhamento';
$this->params['breadcrumbs'][] = ['label' => 'Projetos', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<?= GridView::widget([
'dataProvider' => $dataProviderDes,
'responsive' => true,
'hover' => true,
'condensed' => true,
'floatHeader' => true,
'columns' => [
[ 'class' => 'yii\grid\SerialColumn'],
[
'class' => 'kartik\grid\ExpandRowColumn',
'expandIcon' => '<span class="fa fa-plus-square-o"></span>',
'collapseIcon' => '<span class="fa fa-minus-square-o"></span>',
'value' => function ($model, $key, $index, $grid) {
return GridView::ROW_COLLAPSED;
},
'detail' => function ($model, $key, $index, $grid) {
$searchModel = new AreaSearch();
$searchModel->idDes = $model->idDes;
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
$titleModal = $model->numDes;
if (Yii::$app->request->post('hasEditable')) {
$areaId = Yii::$app->request->post('editableKey');
$Area = Area::findOne($areaId);
$out = Json::encode(['output'=>'', 'message'=>'']);
$post = [];
$posted = current($_POST['Area']);
$post['Area'] = $posted;
if ($Area->load($post)){
$Area->save();
$output = '';
if (isset($posted['prazo']))
{
$output = Yii::$app->formatter->asDate($model->prazo);
}
$out = Json::encode(['output'=>$output, 'message'=>'']);
}
echo $out;
return;
}
return Yii::$app->controller->renderPartial('_area',[
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
'titleModal' => $titleModal,
]);
},
],
'numDes',
[
'attribute' => 'dataDes',
'format' => ['date']
],
[
'class' => 'yii\grid\ActionColumn',
'template' => '{view}',
'buttons' => [
'view' => function ($url, $model, $key) {
return Html::a(Yii::t('app','EDITAR'),Url::to(['despacho/view', 'id' => $model->idDes]), [
'class' => 'btn-xs btn-primary modalButton',
'id' => 'despachoView',
'title' => Yii::t('yii', 'View'),
'data-toggle' => 'modal',
'data-target' => '#activity-modal',
'data-id' => $key,
'data-pjax' => '0',
'value' => Url::to('/area/view'),
]);
},
],
],
],
'panel' => false,/* [
'heading' => '<h3 class="panel-title"><i class="glyphicon glyphicon-th-list"></i> Despachos </h3>',
'type' => 'info',
'before' => Html::a('<i class="glyphicon glyphicon-plus"></i> Add', ['create'], ['class' => 'btn btn-success']),
'after' => Html::a('<i class="glyphicon glyphicon-repeat"></i> Reset List', ['index'], ['class' => 'btn btn-info']),
'showFooter' => false
],*/
])
?>
<?php Modal::begin([
'id' => 'modalDespacho',
'size' => 'modal-lg',
'header' => '<h4 class="modal-title">'. Html::encode($this->title = $model->proposicaoIni . ' | ' . $model->numProjIni . ' | ' . $model->anoProj) . '</h4>',
'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Fechar</a>',
]);
echo "<div id='modalContent'></div>";
?>
<?php Modal::end(); ?>
gridArea (Grid Detalhe da Grid Área)
<?php
use yii\helpers\Html;
use yii\helpers\url;
use kartik\grid\GridView;
use kartik\editable\Editable;
use yii\widgets\Pjax;
use yii\bootstrap\Modal;
use yii\helpers\ArrayHelper;
use kartik\datecontrol\DateControl;
/**
* @var yii\web\View $this
* @var yii\data\ActiveDataProvider $dataProvider
* @var app\models\AreaSearch $searchModel
*/
?>
<?php Pjax::begin(); echo GridView::widget([
'dataProvider' => $dataProvider,
'emptyCell' => '-',
'columns' => [
['class' => 'yii\grid\SerialColumn'],
[
'class' => 'kartik\grid\EditableColumn',
'attribute' => 'area',
'pageSummary' => 'Total',
'vAlign' => 'middle',
'hAlign' => GridView::ALIGN_CENTER,
'editableOptions' => [
'inputType' => Editable::INPUT_DROPDOWN_LIST,
'data' => ArrayHelper::map(\app\models\AreaOpr::find()->orderBy(['area' =>SORT_ASC])->all(),'area','area'), // any list of values
'formOptions' => [
'action' => \yii\helpers\Url::to(['/area'])
]
]
],
[
'class' => 'kartik\grid\EditableColumn',
'attribute' => 'prazo',
'pageSummary' => 'Total',
'format' => ['date', 'dd.MM.yyyy'],
'vAlign' => 'middle',
'editableOptions' => [
'header' => 'Prazo',
'size' => 'sm',
'inputType' => Editable::INPUT_WIDGET,
'widgetClass' => 'kartik\datecontrol\DateControl',
'options' => [
'type' => DateControl::FORMAT_DATE,
'language' => 'pt-BR',
'displayFormat' => 'php:d.m.Y',
'saveFormat' => 'php:Y-m-d',
'convertFormat' => true,
'pluginOptions' => [
'format' => 'php:d.M.Y',
'autoclose' => true
]
],
'formOptions' => [
'action' => \yii\helpers\Url::to(['/area'])
]
]
],
[
'class' => 'kartik\grid\EditableColumn',
'attribute' => 'copia',
'label' => 'Cópia',
'format' => 'raw',
'width' => '20px',
'hAlign' => GridView::ALIGN_CENTER,
'value' => function ($model, $index, $widget) {
if ($model->copia == '1'){ return '<span class="glyphicon glyphicon-ok">';}else{return '<span class="glyphicon glyphicon-minus">';}
// return Html::checkbox('copia[]', $model->copia, ['value' => $index, 'disabled' => true]);
},
'editableOptions' => [
'inputType' => Editable::INPUT_CHECKBOX,
'formOptions' => [
'action' => \yii\helpers\Url::to(['/area'])
]
]
],
[
'class' => 'yii\grid\ActionColumn',
'template' => '{view}',
'buttons' => [
'update' => function ($url, $model) {
return Html::a('<span class="glyphicon glyphicon-pencil"></span>',
Yii::$app->urlManager->createUrl(['area/update', 'id' => $model->idArea, 'edit' => 't']),
['title' => Yii::t('yii', 'Edit'),]
);
},
'view' => function ($url, $model, $key) {
return Html::a(Yii::t('app','EDITAR'),Url::to(['area/view', 'id' => $model->idArea]), [
'class' => 'btn-xs btn-primary modalButton',
'id' => 'areaView',
'title' => Yii::t('yii', 'View'),
'data-toggle' => 'modal',
'data-target' => '#activity-modal',
'data-id' => $key,
'data-pjax' => '0',
'value' => Url::to('/area/view'),
]);
},
],
],
],
'responsive' => true,
'hover' => true,
'condensed' => true,
'floatHeader' => false,
'summary' => false,
'panel' => false,/*[
'heading' => '<h3 class="panel-title"><i class="glyphicon glyphicon-th-list"></i> '.Html::encode($this->title).' </h3>',
'type' => 'info',
'before' => Html::a('<i class="glyphicon glyphicon-plus"></i> Add', ['create'], ['class' => 'btn btn-success']),
'after' => Html::a('<i class="glyphicon glyphicon-repeat"></i> Reset List', ['index'], ['class' => 'btn btn-info']),
'showFooter' => false
],*/
]);
Pjax::end(); ?>
<?php $this->registerJs(
'
'
); ?>
<?php Modal::begin([
'id' => 'modalArea',
'size' => 'modal-lg',
'header' => '<h4 style="text-align: center;" class="modal-title">Despacho Nº ' . Html::encode($titleModal) . '</h4>',
'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Fechar</a>',
]);
echo "<div id='modalContent'></div>";
?>
<?php Modal::end(); ?>
</div>
main.js (Chamando as modais)
$(function(){
/* Modal Despacho *************************************************************************/
$(document).on("click", "#despachoView", function(){
if ($("#modalDespacho").data("bs.modal").isShown) {
$("#modalDespacho").find("#modalContent")
.load($(this).attr("href"));
//document.getElementById("modalHeader").innerHTML = $(this).attr("title");
} else {
$("#modalDespacho").modal("show")
.find("#modalContent")
.load($(this).attr("href"));
//document.getElementById("modalHeader").innerHTML = $(this).attr("title");
}
});
/* Modal Área *****************************************************************************/
$(document).on("click", "#areaView", function(){
if (!$("#modalArea").data("bs.modal").isShown) {
$("#modalArea").modal("show")
.find(".modal-body")
.load($(this).attr("href"));
} else {
$("#modalDespacho").find(".modal-body")
.load($(this).attr("href"));
}
});
});
Primeira imagem: Quando clica em EDITAR o registro da segunda linha em diante e a primeira linha não está expandida só aparece esse div e o modal não aparece. Se a primeira linha estiver expandida, o modal aparece normalmente.
Segunda Imagem: Quando clica para editar o registro da segunda linha expansiva pra baixo acontece isso, e o dado que aparece para editar é sempre o da primeira linha, mesmo ela recolhida.
Reply all
Reply to author
Forward
0 new messages