ListView вывод в виде сетки.

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
Аватара пользователя
lunberg88
Сообщения: 8
Зарегистрирован: 2017.03.29, 19:19

ListView вывод в виде сетки.

Сообщение lunberg88 »

Вечер добрый.
Задался вопросом, как же все-таки с помощью виджета ListView вывести информацию в виде сетки (как товары в инет-магазинах).
Изображение
http://joxi.ru/vAWvqV5CwNea2W -пример.

Вообщем не получается у меня, смотрел примеры кода на github'e, но все попусту. Может ткнете носом, в каком направлении шуршать?(
Аватара пользователя
samdark
Администратор
Сообщения: 9489
Зарегистрирован: 2009.04.02, 13:46
Откуда: Воронеж
Контактная информация:

Re: ListView вывод в виде сетки.

Сообщение samdark »

Сетка делается через CSS. В HTML это обычный список или набор div-ов. Искать по ключевому слову flexbox.
someweb
Сообщения: 552
Зарегистрирован: 2017.03.09, 10:12

Re: ListView вывод в виде сетки.

Сообщение someweb »

Как вариант, с использованием Bootstrap grid, pageSize ставить кратным 6

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

class GridListView extends ListView
{
    /**
     * Renders all data models.
     * @return string the rendering result
     */
    public function renderItems()
    {
        $models = $this->dataProvider->getModels();
        $keys = $this->dataProvider->getKeys();
        $rows = [];
        $bsCol = 0;
        foreach (array_values($models) as $index => $model) {
            $key = $keys[$index];
            if ($bsCol === 0) {
                $rows[] = '<div class="row">';
            }
            $bsCol++;
            $rows[] = '<div class="col-xs-6 col-md-4 col-lg-2">';
            if (($before = $this->renderBeforeItem($model, $key, $index)) !== null) {
                $rows[] = $before;
            }
            
            $rows[] = $this->renderItem($model, $key, $index);

            if (($after = $this->renderAfterItem($model, $key, $index)) !== null) {
                $rows[] = $after;
            }
            $rows[] = "</div>";
            if ($bsCol === 6) {
                $rows[] = '</div>';
                $bsCol = 0;
            }
        }
        if ($bsCol !== 0) {
            $rows[] = '</div>';
        }
        
        return implode($this->separator, $rows);
    }
}    
Чтобы правильно задать вопрос, нужно знать бо́льшую часть ответа. Роберт Шекли.
rak
Сообщения: 2181
Зарегистрирован: 2010.11.02, 23:40
Контактная информация:

Re: ListView вывод в виде сетки.

Сообщение rak »

someweb писал(а): 2017.03.30, 09:06 Как вариант, с использованием Bootstrap grid, pageSize ставить кратным 6
это жесть, а не вариант :?
someweb
Сообщения: 552
Зарегистрирован: 2017.03.09, 10:12

Re: ListView вывод в виде сетки.

Сообщение someweb »

Почему жесть? Чем хуже flexbox или div-ов с float? Или плохо из-за наследования и переписывания метода ListView?
Если критикуете, то будьте добры указать почему плохо. Не все такие гуру как Вы.
Чтобы правильно задать вопрос, нужно знать бо́льшую часть ответа. Роберт Шекли.
rak
Сообщения: 2181
Зарегистрирован: 2010.11.02, 23:40
Контактная информация:

Re: ListView вывод в виде сетки.

Сообщение rak »

someweb писал(а): 2017.04.01, 21:32 Почему жесть? Чем хуже flexbox или div-ов с float? Или плохо из-за наследования и переписывания метода ListView?
Если критикуете, то будьте добры указать почему плохо. Не все такие гуру как Вы.
зачем переписывать то, что можно настроить?
phpstarter
Сообщения: 241
Зарегистрирован: 2014.12.06, 00:06

Re: ListView вывод в виде сетки.

Сообщение phpstarter »

А можно простой пример как это настроить чтоб ничего сложного не переписывать ?
Ответить