Использование GridView в Yii2 --- 18 вопросов и ответов

задняя часть PhpStorm CSS Yii

Люди часто спрашивают о конфигурации GridView для yii2, и некоторые люди в группе недавно спросили, я думаю, пришло время опубликовать руководство.

Мы используем версию yii2.0.14, написанную в формате вопрос-ответ для удобства изучения.

Запустить GridView

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

Так появился GridView, детальный и стабильный кулон отрисовки таблиц.

Обычно GridView используется в связке с различными dataProviders.Я написал статью о dataProvider во фреймворке yii2.Вы можете прочитать ее, которая поможет вам узнать о GridView.Небольшой разговор о 3 поставщиках данных в yii2 и их использовании с GridView

Прежде чем изучать кулон GridView, нам нужно сначала понять структуру GridView, см. рисунок ниже.

Проще говоря, GridView состоит из N столбцов (столбцов), и каждый столбец имеет свои собственные операции с заголовком, содержимым и нижним колонтитулом, которые отражены в коде GridView.

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            'id',
            'created_at:datetime:生成时间',
            [
                'label'=>'会员名',
                'attribute'=>'username',
                'format'=>'text'
            ],
        ]
    ]);
}catch(\Exception $e){
    // todo
}

Of course, yii2 has already done quite a bit of detail. You don't need to write columns. GridView will automatically render each column according to the dataProvider. Next, let's start the question and answer area and learn more about GridView by asking and отвечая на вопросы.

этап подготовки

Чтобы вопрос и ответ проходили гладко, мы смоделировали таблицу данных в качестве источника набора результатов.

id username province city created_at updated_at Sex
1 abei Хэйлунцзян Хэйхэ 1514201852 1528707743 1
2 всесторонний Цзилинь Чанчунь 1528115243 1528115243 1
3 Бай Синь Цзилинь Мацубара 1528180018 1528255890 1
4 Чжан Нань Ляонин Шэньян 1528265883 1528265883 0

Column

В серии A мы сначала поговорим об использовании столбцов в GridView.

A1. Пожалуйста, сделайте удостоверение личности, имени пользователя, провинцию, город и секс.

Когда нам нужны только $dataProvider некоторые свойства каждого объекта, необходимо указать атрибут columns, код выглядит следующим образом

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            'id',
            'username',
            'province',
            'city',
            'created_at'
        ]
    ]);
}catch(\Exception $e){
    // todo
}

Результат выглядит следующим образом

A2. Я хочу изменить содержимое заголовка столбца

В А1 мы обнаружили, что заголовок каждого столбца на английском языке, и теперь мы хотим изменить его на китайский язык, есть три метода

метод 1Измените метод attributeLabels в соответствующей модели.

// app\models\User

class User extends \yii\db\ActiveRecord {
	
    public function attributeLabels(){
        return [
            'id' => 'ID',
            'username' => '用户名',
            'province' => '省',
            'city' => '城市',
            'created_at' => '新建时间',
            'updated_at' => '最近更新',
            'sex' => '性别',
        ];
    }       
}

Когда мы переустанавливаем метод attributeLabels, соответствующий GridView автоматически переходит к выбору.

Метод 2.Установите свойство метки столбца следующим образом.

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            'username:text:用户名'
        ]
    ]);
}catch(\Exception $e){
    // todo
}

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

Способ 3Используйте настраиваемые свойства GridView, следующий код

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            [
                'label'=>'用户名',
                'attribute'=>'username'
            ]
        ]
    ]);
}catch(\Exception $e){
    // todo
}

Вышеуказанные три способа могут быть с 1-3 более гибкими, конечно, также увеличивают количество кода, первый из самых простых и наиболее гибких из трех видов.

A3. Мне не нужны временные метки

В А2 мы видимНовое времяСодержимое этого столбца имеет метку времени напрямую, как оно становится соответствующим временем? На самом деле есть два подхода к этой проблеме.

метод 1Установите свойство формата столбца

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            'created_at:datetime'
        ]
    ]);
}catch(\Exception $e){
    // todo
}

Способ 2Передавая столбец типа массива и устанавливая его значение, следующий код

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            [
                'attribute'=>'created_at',
                'value'=>function($model){// 形参为此行记录对象
                    return date("Y-m-d H:i:s",$model->created_at);
                }
            ]
        ]
    ]);
}catch(\Exception $e){
    // todo
}

Судя по методу 1 и методу 2 из A3, фактически метод 1 является скорее ярлыком для метода 2, поэтому мы также можем выполнить требования этого вопроса, установив атрибут формата столбца типа массива равным datetime.

A4. Я хочу определить атрибут с именем провинция и город, чтобы объединить содержимое полей провинции и города.

Благодаря изучению A2 и A3, я думаю, вы уже знаете, что это можно решить через столбец типа массива, да, следующий код

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            [
                'label'=>'省市',
                'value'=>function($model){
                    return "{$model->province}-{$model->city}";
                }
            ]
        ]
    ]);
}catch(\Exception $e){
    // todo
}

valueАтрибут представляет содержимое данных этой ячейки, и результат может быть возвращен, как и диаграмма результатов.

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

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            [
                'label'=>'省市',
                'attribute'=>'province',
                'value'=>function($model){
                    return "{$model->province}-{$model->city}";
                }
            ]
        ]
    ]);
}catch(\Exception $e){
    // todo
}

A5.Как управлять сортировкой столбцов?

Из A4 мы знаем, что сортировка управляется установкой атрибута атрибута столбца, но исходное назначение атрибута здесь не указано, поэтому наш стандартный метод удаления сортировки или установки сортировки заключается в использовании егоenableSortingреализованы свойства.

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            [
                'label'=>'省市',
                'attribute'=>'province',
                'enableSorting'=>false,
                'value'=>function($model){
                    return "{$model->province}-{$model->city}";
                }
            ]
        ]
    ]);
}catch(\Exception $e){
    // todo
}

По умолчанию enableSorting имеет значение true, вы можете отменить функцию сортировки этого столбца, установив для нее значение false, как показано ниже.

A6.Как управлять стилем столбца?

Теперь, когда вы знаете 5 приемов использования GridView, давайте двигаться дальше, в A6 мы пытаемся изменить стиль столбца таблицы. Для стилей столбцов GridView предоставляет 3 свойства: headerOptions, contentOptions и footerOptions.

Теперь давайте сделаем требование, персонализируйте столбец провинций и городов, программируйте главу колонны в красном и программируйте содержание столбца в синем, следующим образом


try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            [
                'label'=>'省市',
                'attribute'=>'province',
                'enableSorting' => false,
                'value'=>function($model){
                    return "{$model->province}-{$model->city}";
                },
                'headerOptions' => ['style'=>'color:red'],
                'contentOptions' => ['style'=>'color:blue'],
            ]
        ]
    ]);
}catch(\Exception $e){
    // todo
}

Да, просто используйте headerOptions и contentOptions этого столбца

Следует отметить, что мы используем F12 браузера, чтобы увидеть столбец цвета.

Как видите, headerOptions и contentOptions напрямую влияют на теги th и td, добавляя к ним такие атрибуты, как стиль, поэтому, если в ваших тегах th или td есть другие html-теги, прямое определение стиля не будет действовать. можно решить с помощью классов css.

A7.Об использовании footerOptions в GridView.

В A6 мы сказали, что столбец GridView имеет свойство footerOptions, так для чего же используется это свойство? Анализ слов предназначен для управления свойствами нижнего колонтитула (такими как стиль и т. д.), но где нижний колонтитул? ? ? где где?

Сначала вам нужно установить для параметра showFooter GridView значение true. Только тогда это можно сделать.

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            [
                'label'=>'省市',
                'attribute'=>'province',
                'enableSorting' => false,
                'value'=>function($model){
                    return "{$model->province}-{$model->city}";
                },
                'headerOptions' => ['style'=>'color:red'],
                'contentOptions' => ['style'=>'color:blue'],
                'footerOptions'=>['style'=>'color:yellow']
            ]
        ],
        'showFooter'=>true
    ]);
}catch(\Exception $e){
    // todo
}

Под небом с showFooter=true нижние колонтитулы могут свободно летать.

В принципе, результатом 'showFooter'=>true является то, что в таблице появляется следующий код

<tfoot>
   <tr>
   	<td></td>
   	<td></td>
   	<td></td>
   <tr> 
</tfoot>

Следовательно, footerOptions каждого столбца управляет td, соответствующим этому столбцу в tfoot.

A8.footerRowOptions вы используете для сухих волос?

Когда мы самодовольно использовали showFooter в A8, вдруг PhpStorm автоматически связал footerRowOptions, что это?

footerRowOptions — это свойство GridView, которое управляет свойством тега tr для tfoot.Проще говоря, эффект, который вы видите в каждой ячейке tfoot, представляет собой комбинацию footerRowOptions + footerOptions (с точки зрения стиля).

Например, для приведенного выше примера мы настраиваем footerRowOptions в разделе

'footerRowOptions'=>['style'=>'font-size:20px;']

Затем вы обнаружите, что желтый шрифт стал размером 20 пикселей.

Примечание: эти xxxOptions в A6, A7 и A8 могут управлять атрибутом метки, а не только стилем.

Большая семья A9.showFooter

Из A7 мы знаем showFooter GridView, который определяет, отображает ли таблица информацию о tfoot, и есть некоторые другие члены семейства show.

  • showHeader может управлять отображением заголовка таблицы, он отображается по умолчанию.
  • showOnEmpty Когда данные пусты, независимо от того, существует ли рамка таблицы, она не существует по умолчанию.

A10.Фокусник видит фокусы

В этом фрагменте давайте поговорим о свойстве visible столбца GridView. По умолчанию это свойство имеет значение true, чтобы представить отображение этого столбца. Установив свойство visible, столбец можно скрыть. Это скрывает не-CSS display:none, но удаляет это при рендеринге таблицы.Список.

Вы можете спросить, если я собираюсь использовать visible для скрытия столбца, было бы неплохо, если бы я не писал этот столбец?

Да, ваша идея верна, но visible может передать выражение для реализации логического суждения.Например, в следующем требовании, когда администратор № 1 входит в систему, вы можете увидеть список провинций и городов.

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            [
                'label'=>'省市',
                'attribute'=>'province',
                'enableSorting' => false,
                'value'=>function($model){
                    return "{$model->province}-{$model->city}";
                },
                'visible'=>(Yii::$app->admin->id === 1)
            ]
        ],
        'showFooter'=>true
    ]);
}catch(\Exception $e){
    // todo
}

A1-A10 Мы сосредоточимся на общедоступных свойствах каждого столбца GridView, это еще не все, есть и другие свойства для разных типов столбцов, таких как DataColumn, ActionColumn, CheckboxColumn и т. д., для объяснения различных типов столбцов. колонки, будут выпущены позже.

GridView

Затем мы входим в серию B, основная цель серии B — объяснить GridView.

B1 О макете

По умолчанию макет GridView выглядит следующим образом.

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

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            
        ],
        'layout'=>"{items}\n{pager}"
    ]);
}catch(\Exception $e){
    // todo
}

В макете можно использовать 5 значений, а именно {сводка}, {ошибки}, {элементы}, {сортировщик} и {пейджер}.

B2. Укажите тип столбца по умолчанию dataColumnClass

В таблице у каждого столбца своя роль, некоторые из них являются типами данных, некоторые — типами флажков, существует 5 конкретных типов.

  1. ActionColumn
  2. CheckboxColumn
  3. DataColumn
  4. RadioButtonColumn
  5. SerialColumn

Тип столбца по умолчанию можно задать через GridView, конечно можно указать его класс отдельно для специального класса.

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        
        'columns'=>[
            
        ],
        'dataColumnClass'=>"yii\grid\DataColumn"
    ]);
}catch(\Exception $e){
    // todo
}

Свойство B3.caption

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

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        'columns'=>[
            
        ],
        'caption'=>"会员列表"
    ]);
}catch(\Exception $e){
    // todo
}

Схема эффекта выглядит следующим образом

Конечно, само собой разумеется, GridView также предоставляет свойство captionOptions, позволяющее управлять свойствами подписи.

B4.tableOptions и свойства параметров

Некоторые разработчики этих двух свойств могут быть сбиты с толку.Далее я буду использовать картинку, чтобы вы сразу поняли.

То есть при визуализации GridView сначала создается контейнер div, который является представителем этого GridView, а затем в этот контейнер помещаются различные элементы, такие как {summary}, {items} и т. д.

  • options управляет свойствами контейнера div, добавляя class="grid-view" по умолчанию
  • tableOptions управляет свойствами таблицы {items}, добавляя к ней class="table table-striped table-bordered" по умолчанию

Собираетесь ли вы теперь изменить класс стиля таблицы?

B5. Куча хороших знакомых headerRowOptions и footerRowOptions

Мы говорили об использовании footerRowOptions в A8, использование headerRowOptions такое же, но оно управляет свойствами tr под thead.

B6.rowOptions

Изучив B5, вы можете сразу увидеть rowOptions. Да, его цель — управлять каждым tr под tbody, но он более мощный. Помимо непосредственного получения массива, его также можно передать ванонимная функция.

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

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        'columns'=>[
            
        ],
        'rowOptions'=>function($model,$key, $index){
            if($index%2 === 0){
                return ['style'=>'background:red'];
            }
        }
    ]);
}catch(\Exception $e){
    // todo
}

Цель достигнута, эффект виден

Для 4 формальных параметров количества анонимных строк, полученных rowOptions, вот описание

  • $model: отображаемый в данный момент объект
  • $key: постепенное изменение текущего объекта
  • $index: для текущей страницы начните с 0 и увеличивайте на 1 построчно.
  • $grid: объект GridView

B7. перед строкой и после строки

Это пара очень гибких свойств, которые получают анонимную функцию. Что происходит до и после рендеринга строки соответственно? Конечно, что произойдет, зависит от вас.

Следует помнить, что результат, возвращаемый анонимной функцией, также будет включен в процесс рендеринга в виде строки.Например, когда мы встречаем нечетное число, добавьте строку ниже этой строки, вы можете использовать следующий код

try {
    echo GridView::widget([
        'dataProvider' => $dataProvider,
        'tableOptions' => ['class'=>'table table-bordered'],
        'columns'=>[
            'id',
            'username:text:用户名',
            .....
        ],
        'afterRow'=>function($model,$key, $index,$grid){
            if(($index+1)%2 != 0){
                return "<tr><td colspan='4'>我是基数</td></tr>";
            }
        }
    ]);
}catch(\Exception $e){
    // todo
}

Очень хорошо, получили желаемый результат

B8. Два маленьких друга из горшка placeFooterAfterBody и emptyCell

Очень подробные два небольших атрибута

  • placeFooterAfterBody Когда мы хотим отобразить нижний колонтитул, атрибут placeFooterAfterBody определяет место размещения html в таблице.По умолчанию он помещается за заголовком.Вы можете выбрать placeFooterAfterBody=true, чтобы разместить нижний колонтитул за основным текстом. Эта функция поддерживается только в yii2.0.14.
  • emptyCell — еще одна маленькая деталь: если ячейка пуста, какой символ используется для ее заполнения? По умолчанию это  , вы можете указать его снова.

резюме

Я написал более 3000 слов, прежде чем я это понял.Я хотел завершить объяснение GridView, но сейчас это кажется сложным.В конце концов, есть еще много типов столбцов, которые нужно изучить и разделить.Проведите отдельный анализ,надеюсь это работает для вас.

Спасибо за чтениеДругие подробные статьи по Yii, которыми можно поделиться

Категории