Как открыть м. окно в GridView для каждой записи? [Решено]

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
nepster
Сообщения: 838
Зарегистрирован: 2013.01.02, 03:35

Как открыть м. окно в GridView для каждой записи? [Решено]

Сообщение nepster »

Пример для открытия модального окна:

Код: Выделить всё

print(
                Html::a('<i class="icon-info"></i>',   ['#info'], ['class'=>'btn btn-icon btn-success','data-toggle'=>'modal','role'=>'button']) .'
   
                <div id="info" class="modal fade" tabindex="-1" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">-----</h4>
                            </div>
                            
                            <div class="modal-body with-padding">
                                <h5 class="text-error">------</h5>
                                <p>---------</p><br/>
                            </div>
                         </div>
                     </div>
                 </div>
            ');

Все работает все отлично. Теперь возник вопрос, как это же сделать в GridView ?

Я пробовал так, и код окна выносил за GridView , но это не работает и нужно для каждой записи свое окно (для того чтобы вписать в нем дополнительную информацию.)

Код: Выделить всё

[
            'format' => 'html',
            'contentOptions' => ['class'=> 'tdControl'],
            'label'  => Yii::t('app', 'Управление'),
            'value' => function ($model) {           
                return '<div class="text-center">' .
                    Html::a('<i class="icon-info"></i>',   ['#info'], ['class'=>'btn btn-icon btn-success','data-toggle'=>'modal','role'=>'button']) 
                       . '</div>';
            },
        ],
Подскажите пожалуйста как это можно сделать?
Последний раз редактировалось nepster 2014.05.19, 16:31, всего редактировалось 1 раз.
nepster
Сообщения: 838
Зарегистрирован: 2013.01.02, 03:35

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение nepster »

подскажите пожалуйста как вообще можно открыть модальное окно внутри гридвью для каждой записи ?
astronin
Сообщения: 606
Зарегистрирован: 2012.01.30, 17:46

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение astronin »

Приведу пример, как это делается с помощью аякса

добавить в columns линк для открытия окна

Код: Выделить всё

[
           'attribute' => 'name',
           'format' => 'raw',
           'value' => function ($data) {
                $link = Html::a($value, ['view', 'id' => $data->id], [
                        'title' => $value,
                        'data' => [
                            'target' => '#myModal',
                            'toggle' => 'modal',
                            'backdrop' => 'static',
                        ]
                ]);
           return $link;
        },
],
 
ниже в html добавить код куда будут вставляться данные

Код: Выделить всё

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
в js добавить следующий скрипт для обновления данных в окне, полученных аяксом

Код: Выделить всё

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
в контреллере вызывать вью через $this->renderAjax();
во вью сделать HTML модального окна со своими данными взятого из:
http://getbootstrap.com/javascript/#modals

Пример:

Код: Выделить всё

<div class="modal-dialog modal-lg">
    <div class="modal-content users-account">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel"><?= Html::encode($this->title) ?></h4>
        </div>
        <div class="modal-body">
        ...
        </div>
        <div class="modal-footer">
        ...
        </div>
Кажется ничего не упустил, если что пишите
nepster
Сообщения: 838
Зарегистрирован: 2013.01.02, 03:35

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение nepster »

а если данные уже есть и ajax не нужен ? Тоесть например я вывожу в гридвью список пользователей. Но все данные в таблицу уместить не реально (точнее реально но не красиво) и дополнительную информацию я бы хотел выводить в модальном окне. Тоесть как бы инфа уже есть, нужно ее засунуть в окно. Я пытался пихать код окна в 'value' => function ($data) {...}; Но там выходит так, что почему-то в html порезан основной div с id
astronin
Сообщения: 606
Зарегистрирован: 2012.01.30, 17:46

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение astronin »

nepster писал(а):а если данные уже есть и ajax не нужен ? Тоесть например я вывожу в гридвью список пользователей. Но все данные в таблицу уместить не реально (точнее реально но не красиво) и дополнительную информацию я бы хотел выводить в модальном окне. Тоесть как бы инфа уже есть, нужно ее засунуть в окно. Я пытался пихать код окна в 'value' => function ($data) {...}; Но там выходит так, что почему-то в html порезан основной div с id
Повесте какой ни будь event на onclick линка в row, по нему в какой-то js функции пихайте инфу в окно, только выше приведенный js код надо добавлять всеравно.
Или насоздайде кучу окон под каждый row и тогда просто откройте окно как простым бутстрапом и все...
nepster
Сообщения: 838
Зарегистрирован: 2013.01.02, 03:35

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение nepster »

Подскажите пожалуйста как можно насоздавать кучу окон под каждый row? Я пробовал пихать окно, как в первом посту данной темы, но там режутся id и окно не открывается.
astronin
Сообщения: 606
Зарегистрирован: 2012.01.30, 17:46

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение astronin »

nepster писал(а):Подскажите пожалуйста как можно насоздавать кучу окон под каждый row? Я пробовал пихать окно, как в первом посту данной темы, но там режутся id и окно не открывается.
пихать окно в линк не надо, только указать id окна
для первого указать в линке data-toggle="modal" data-target="#my1Modal"
для второго - data-toggle="modal" data-target="#my2Modal"
для ретьего - data-toggle="modal" data-target="#my3Modal"
...

а сами окна рисовать под grid-ом, соответстенно id их будут
id="my1Modal"
id="m2Modal"
id="my3Modal"
nepster
Сообщения: 838
Зарегистрирован: 2013.01.02, 03:35

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение nepster »

это под гридвью нужно еще раз циклом прогонять все данные, а вы уверенны, что это хороший подход ?
Аватара пользователя
Insolita
Сообщения: 788
Зарегистрирован: 2011.06.06, 01:39
Контактная информация:

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение Insolita »

для открытия модального - в гридвью у меня такой код

Код: Выделить всё

 <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $model,
        'columns' => [
            'id,
            'field1',
            'field2', 
            ['class' => 'yii\grid\ActionColumn', 
                'buttons'=>[
                    'view'=>function($url,$model){
                            $url=Yii::$app->getUrlManager()->createAbsoluteUrl(['/my/url/index','id'=>$model->id}]);
                            return \yii\helpers\Html::a('<span class="glyphicon glyphicon-magnet"></span>', '#mymodal', [
                                    'title' => 'Назначить','data-toggle'=>'modal','data-backdrop'=>false,'data-remote'=>$url
                                ]);
                        },
                ],
                'template'=>'{view}'],
        ],
    ]); ?>

<?php \yii\bootstrap\Modal::begin(['header'=>'My modal data', 'id'=>'mymodal'])?>
<?php \yii\bootstrap\Modal::end()?>
В идеале должно работать так, но у меня сколько ни обновляла бутстрап - дефолтный remote ни фига не срабатывает, только модальное открывает
поэтому дописывем такое шаманство

Код: Выделить всё

$js=<<<JS
$(document).on("click","[data-remote]",function(e) {
    e.preventDefault();
    $("div#mymodal .modal-body").load($(this).data('remote'));
});
$('#Assigs').on('hidden.bs.modal', function (e) {
  $("div#mymodal .modal-body").html('');
}); 
JS;

$this->registerJs($js);
astronin
Сообщения: 606
Зарегистрирован: 2012.01.30, 17:46

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение astronin »

nepster писал(а):это под гридвью нужно еще раз циклом прогонять все данные, а вы уверенны, что это хороший подход ?
конечно же нет, лучший подход я предложил в самом начале, детальные данные приносит аякс, а в гриде отображаются только основные базовые данные в ограниченом количестве, чтоб страница с grid-ом открывалась как можно быстрее
astronin
Сообщения: 606
Зарегистрирован: 2012.01.30, 17:46

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение astronin »

Insolita писал(а): В идеале должно работать так, но у меня сколько ни обновляла бутстрап - дефолтный remote ни фига не срабатывает, только модальное открывает
поэтому дописывем такое шаманство
возможно, потому что у вас не прописан data-target="#myModal"
Аватара пользователя
Insolita
Сообщения: 788
Зарегистрирован: 2011.06.06, 01:39
Контактная информация:

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение Insolita »

data-target в href прописан - оно и так и так берет да и этот параметр для открытия модалки - модалку оно открывает, пустую - контент не подгружает и даже не пытается, в firebug не ругается
nepster
Сообщения: 838
Зарегистрирован: 2013.01.02, 03:35

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение nepster »

блин это полное кидалово.

Insolita, это в любом случае нужно прогонять еще 1 цикл под гридвью для всех окон.

astronin, ajax это конечно хорошо, но тут он ну совсем не нужен данные уже есть, это как лишний запрос.


Походу придется переопределять гридвью и писать свою обертку как раз для модальных окон.
Аватара пользователя
Insolita
Сообщения: 788
Зарегистрирован: 2011.06.06, 01:39
Контактная информация:

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение Insolita »

nepster писал(а):блин это полное кидалово.

Insolita, это в любом случае нужно прогонять еще 1 цикл под гридвью для всех окон.

astronin, ajax это конечно хорошо, но тут он ну совсем не нужен данные уже есть, это как лишний запрос.


Походу придется переопределять гридвью и писать свою обертку как раз для модальных окон.
Ну вариант с модалкой хорош когда нужно подгрузить доп.данные из какой-то другой логики, например список заявок к клиенту, список постов юзера и т.п. или форму какую
а если тебе надо уже включенные данные которые не влазят показать - то тут или вариант посмотреть в сторону ... не помню как плагин называет, но позваляет выбрать какие столбцы из гридвью отображать какие скрыть
или - делать не модалкой а поповером - с ним удобнее сразу контент сгенерить который по кнопке показываться будет
что-то типа так

Код: Выделить всё

 <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $model,
        'columns' => [
            'id',
            'field1',
            'mybutton',=>['header'=>'dopinfo','format'=>'raw','value'=>function($data){
                return '<button type="button" rel="popover" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="'.Html::encode($data->a).','.Html::encode($data->b).'">
 Смотреть
 </button>';
       }]
        ],
    ]); ?>

<?php
$js=<<<JS
$('[rel="popover"]').popover();
JS;
$this->registerJs($js);
?>

Но в любом случае под такое лучше свой класс заточить
nepster
Сообщения: 838
Зарегистрирован: 2013.01.02, 03:35

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение nepster »

да я уже так и начал делать. На основе ActionColumn.

Там получается такая вещь, в админке есть гридвью пользователей. У пользователя куча данных:
- Логин
- Аватар
- Фимилия
- Имя
- Город
- Страна
- О себе
- Контакты
- статус
- роль
и тп. Около 20 пунктов
Более 6 - 7 в таблицу не вариант пихать они слишком разрастается. Поэтому было принято решение сделать кнопку Дополнительно, где открывается модальное окно с его дополнительными данными, а основные отображаются в гридвью.

Пока вышло что-то такое:

Код: Выделить всё

        
        ['class' => 'backend\components\ActionColumnControl', 
            'contentOptions' => ['class'=> 'tdControl'],
            'buttons'=>[
                'update' => function($url,$model){
                    return Html::a('<i class="icon-wrench"></i>', ['/users/default/profile', 'id' => $model->id]);
                },
                'info' => function($url,$model){
                    return 
                    Html::a('<i class="icon-info"></i>',   ['#user-'.$model->id], ['class'=>'btn btn-icon','data-toggle'=>'modal','role'=>'button']).
                    '<div id="user-'.$model->id.'" class="modal fade" tabindex="-1" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title">'.Yii::t('users.main','Пользователь').' '.$model->username.'</h4>
                                </div>
                                
                                <div class="modal-body with-padding">
                                    <h5 class="text-error">------</h5>
                                    <p>---------</p><br/>
                                </div>
                            </div>
                        </div>
                    </div>';
                },
            ],
            'template'=>'{update} {info}',
        ], 
Аватара пользователя
Insolita
Сообщения: 788
Зарегистрирован: 2011.06.06, 01:39
Контактная информация:

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение Insolita »

так тогда лучше всю генерацию "модального" вынести в класс кнопки, чтобы в GridView в интерфейсе задавать только список аттрибутов которые в окне будут отображаться...
ну и имхо поповер в этом плане удобнее тем что шустрее чем модальное работает, можно вообще на событие hover повешать и обходиться без кликов
nepster
Сообщения: 838
Зарегистрирован: 2013.01.02, 03:35

Re: Как открыть модальное окно в GridView для каждой записи?

Сообщение nepster »

по ховеру это таки не удобно. + Это может понадобится в других модулях, точнее понадобится для подобных выводов дополнительной инфы. Всем спасибо.
lego
Сообщения: 26
Зарегистрирован: 2014.04.16, 15:22

Re: Как открыть м. окно в GridView для каждой записи? [Решен

Сообщение lego »

А как можно вызывать модальное окно по нажатию на запись в gridview (без кнопки)?
Аватара пользователя
Insolita
Сообщения: 788
Зарегистрирован: 2011.06.06, 01:39
Контактная информация:

Re: Как открыть м. окно в GridView для каждой записи? [Решен

Сообщение Insolita »

Код: Выделить всё

 'columns' => [
            'id',
            'field1',
            'field'=>['name'=>'filed','format'=>'raw','value'=>function($data){
                return Html::a($data->field,'#modalId',['data-target'=>'#modalId','data-toggle'=>'modal']);
            }],
           'anotherfield',
         .....
]
 
ну и где-то код модалки с заданным ID - вручную или через виджет
http://bootstrap-3.ru/javascript.php#modals

насчёт format может лучше не raw а типа link или html до них я тут пока еще не добралась для детального
lego
Сообщения: 26
Зарегистрирован: 2014.04.16, 15:22

Re: Как открыть м. окно в GridView для каждой записи? [Решен

Сообщение lego »

Спасибо, подскажите еще, пожалуйста, как вы передаете данные в виде объекта, у меня, они в виде массива?
Ответить