Набросок
Модуль просмотра-это V – модуль архитектуры MVC в Yii. Он в основном отвечает за отображение данных, отображение файлов шаблонов и отображение содержимого данных.
Основные понятия
В MVC есть папка Views в Yii, в которой хранятся файлы представлений проекта и которая отвечает за отображение содержимого данных.
Во-первых, для визуализации и отображения представления используется простой метод работы контроллера. Функция RenderPartial () вызывается для визуализации файла представления. Первый-это имя файла представления, который существует в папке, названной контроллером в каталоге представления. Имя файла соответствует способу работы. Второе – это визуализация представления. Данные должны быть массивом.
Это скрипт просмотра php , Который показывает некоторые данные с контроллера, а также может вызывать некоторые плагины для выполнения некоторых функций, таких как фильтрация данных и так далее.
Используя файлы макетов для обработки представлений, файл макета создается в папке “Макет” в каталоге “Представления”, и его имя является самодельным.
Затем вы можете использовать метод render () для визуализации файла макета, и данные содержимого представления индекса по умолчанию встроены в файл макета в виде $content, а затем отображаются. Конечно, вторым параметром метода визуализации является массив, который можно использовать для отображения данных в представлении, а затем для отображения. Покажи это.
Кроме того, в одном представлении может быть представлено несколько файлов представления, что также реализовано методом визуализации.
По умолчанию данные файла макета отображаются в виде содержимого $или могут отображаться в представлении в виде блока данных.
Общие взаимодействия на страницах
Суждение if else о Html:
status == 1): ?>span class="label-success radius">enabled span class="label-success radius">Disabled
Некоторые специальные кнопки отображаются в Html:
= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => [ [ 'class' => 'yii\grid\ActionColumn', 'buttons' => [ 'layoutContent' => function ($url, $model){ /** * @var $model Service */ Return Html:: a ('View Service List Information', Url:: to ['jlerp-service-order/view','id'=> model-> id]),,[ 'class' => 'btn btn-success btn-xs', 'target' => '__blank' ]); } ], 'template' => '{layoutContent}', 'options' => [ 'style' => 'width:100px' ], ] ], ]); ?>
Некоторые часто используемые реализации нажатия кнопок в Html
< button onclick = "confirm ()" id ='confirm-index'class ='btn btn-info' type = "submit"> preview homepage effect
< font color = Red > note
After each modification of the home page configuration, preview the effect first, then confirm the generation after no problem.
You can view the layout effect according to the input configuration version number preview.
Strong > must be confirmed once before a new home page can be officially generated.
< font color = Red > preview method
Enter the version number, click on the preview homepage effect, enter the preview effect page, and then:
If it is Firefox Browser, press Ctrl + Shift + M to enter the responsive design pattern.
If it's Google Browser, press F12, then Ctrl + Shift + M.
= Html:: a ('Create Layout Configuration', ['Create'], ['class'=>'btn btn-success'])?> = Html:: a ('Confirmation of Layout Effectiveness', ['build-index'], ['class'=>'btn btn-danger','data-confirm'=>'Confirmation of Layout Effectiveness')? >] > >
Использование Gridview
Представьте некоторые распространенные случаи использования GridView:
Раскрывающийся поиск
Форматирование даты и возможность поиска данных
Отображать или нет на основе параметров
Ссылки можно нажимать и переходить по ним
изображение на дисплее
Рендеринг HTML
пользовательская кнопка
Установите ширину и другие стили
Настраиваемые поля
Пользовательский стиль строк
Добавьте кнопки для вызова операций JS
Использование GridView для реализации пакетного удаления
Раскрывающийся поиск
Учитывая, что в таблице данных может быть много полей для выпадения, мы сначала реализуем метод в ее модели, чтобы облегчить последующие операции:
public static function dropDown ($column, $value = null) { $dropDownList = [ 'is_delete'=> [ '0'=>'Display', '1'=>'Delete', ], 'is_hot'=> [ '0'=>'No', '1'=>'Yes', ], // New fields to implement drop-down rules can be added as above // ...... ]; // Display the corresponding value according to the specific value if ($value !== null) return array_key_exists($column, $dropDownList) ? $dropDownList[$column][$value] : false; // Return associative array, user drop-down filter implementation else return array_key_exists($column, $dropDownList) ? $dropDownList[$column] : false; }
Затем давайте перейдем к коду, чтобы узнать, как реализовать раскрывающийся поиск:
= GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ // ...... [ 'attribute' => 'is_hot', 'value' => function ($model) { return Article::dropDown('is_hot', $model->is_hot); }, 'filter' => Article::dropDown('is_hot'), ], [ 'attribute' => 'is_delete', 'value' => function ($model) { return Article::dropDown('is_delete', $model->is_delete); }, 'filter' => Article::dropDown('is_delete'), ], // ...... ], ]); ?>
Таким образом, мы просто реализуем два раскрывающихся эффекта. Чтобы выполнить функцию фильтрации, вы можете добавить условия поиска поля в свой поставщик данных.
Преобразователь даты
Это необходимо обсудить отдельно:
1. Если формат времени поля create_at вашей базы данных-дата или дата-время, легко вывести поле create_at непосредственно из представления сетки, как показано в правой части рисунка выше.
2. Если тип метки времени, хранящейся в базе данных, показан в левой части рисунка выше, вывод должен быть следующим:
[ 'attribute' => 'created_at', 'value' => function ($model) { return date('Y-m-d H:i:s', $model->created_at); }, ], [ 'attribute' => 'created_at', 'format' => ['date', 'Y-m-d H:i:s'], ],
Выше показаны два способа вывода формата, оба.
Однако, если вы хотите реализовать механизм поиска, если ваш реестр данных имеет тип datetime, это очень удобно, поставщик данных не нуждается в изменении, код выглядит следующим образом:
$query->andFilterWhere([ // ...... 'created_at' => $this->created_at, // ...... ]);
Если ваши данные хранятся в метке времени, первым шагом является изменение соответствующих правил, как показано на следующем рисунке. Второй шаг-изменить поставщика данных, обратившись к следующему коду:
// The format of input in our search input box is 2016-01-01 rather than timestamp. // Output 2016-01-01 is nothing more than to search for the data of the day, so the code is as follows if ($this->created_at) { $createdAt = strtotime($this->created_at); $createdAtEnd = $createdAt + 24*3600; $query->andWhere("created_at >= {$createdAt} AND created_at <= {$createdAtEnd}"); }
Следует ли отображать столбец
Возьмем простой случай: Условия: Существует требование getparametertype: Имя столбца отображается только в том случае, если значение типа равно 1, в противном случае столбец не отображается.
Код реализован следующим образом:
[ 'attribute' => 'name', 'value' => $model->name, 'visible' => intval(Yii::$app->request->get('type')) == 1, ],
Ссылки можно нажимать и переходить по ним
Это очень похоже на эффект рендеринга HTML. То, что мы хотим здесь сказать, – это формат значения атрибута столбца, формат которого можно увидеть в файле yii18nFormatter. php. Все форматы могут быть решены:
[ 'attribute' => 'order_id', 'value' => function ($model) { return Html::a($model->order_id, "/order?id={$model->order_id}", ['target' => '_blank']); }, 'format' => 'raw', ],
изображение на дисплее
Там же, вам нужно только указать формат формата в качестве изображения. Вторым параметром формата можно задать размер изображения. Вы можете обратиться к следующему коду:
[ 'label'=>'avatar', 'format' => [ 'image', [ 'width'=>'84', 'height'=>'84' ] ], 'value' => function ($model) { return $model->image; } ],
Рендеринг HTML
Например, у нас есть поле с надписью title, но это другое название. TA содержит HTML-теги. Мы не хотим показывать это на странице: заголовок 123 В этой форме мы хотим, чтобы заголовок 123 отображался в виде тега p. На код можно ссылаться следующим образом, просто укажите формат как raw.
[ 'attribute' => 'title', 'value' => function ($model) { return Html::encode($model->title); }, 'format' => 'raw', ],
пользовательская кнопка Часто мы не хотим удалять кнопку на странице списка, но мы хотим добавить кнопку, например, получить кнопку XXX. Как мы можем этого достичь? Здесь вам нужно настроить класс столбца действий, изменить шаблон элемента конфигурации и добавить get-xxx в элемент кнопок для добавления шаблона.
[ 'class' => 'yii\grid\ActionColumn', 'template' => '{get-xxx} {view} {update}', 'header'=>'operation', 'buttons' => [ 'get-xxx' => function ($url, $model, $key) { Return Html:: a ('Get xxx', $url, ['title'=>'Get xxx']); }, ], ],
Установите ширину
Например, наш столбец заголовка слишком длинный. Не могли бы вы сначала указать мне ширину этой колонки? Ответ: Да. Смотрите пример:
[ 'attribute' => 'title', 'value' => 'title', 'headerOptions' => ['width' => '100'], ],
Просто укажите параметры заголовка конфигурации.
Настраиваемые поля
Что такое кастомизация? Здесь мы имеем в виду добавление столбца в таблицу, а соответствующего столбца в базе данных нет.
Предположим, мы добавляем новый столбец суммы потребления заказа, и в таблице нет этого поля:
[ 'attribute'=>'consumption amount', 'value' => function ($model) { // Here you can get the table by association based on the other fields of the table } ],
Пользовательские строки
Маленький друг сказал, что таблица GridView, сгенерированная gii, цвет линии и линии неочевидны, выглядят неудобно, давайте посмотрим, как определить стиль линии:
= GridView::widget([ // ...... 'dataProvider' => $dataProvider, 'rowOptions' => function($model, $key, $index, $grid) { return ['class' => $index % 2 ==0 ? 'label-red' : 'label-green']; }, // ...... ]); ?>
Все предыдущие операции основаны на столбце столбец. Здесь мы настраиваем параметры строк с небольшим вниманием, потому что они управляют строками. Кроме того, пользовательские метки-красная и зеленая-должны быть выполнены в соответствующем стиле. Здесь мы рассмотрим фактический эффект страницы.
Добавьте кнопки для вызова операций JS
Вон там пришел менеджер по продукту, Сяо Ван, вы очень часто изменяете статус функции, каждый раз, когда вам нужно нажимать на страницу сведений для изменения, могу ли я щелкнуть мышью на странице списка, чтобы добиться небольшого успеха в ее изменении?
Фактически, асинхронный запрос работает с текущим состоянием строки. Давайте посмотрим, как это реализовано в gridview.
[ 'class' => 'yii\grid\ActionColumn', 'header'=>'operation', 'template' => '{view} {update} {update-status}', 'buttons' => [ 'update-status' => function ($url, $model, $key) { Return Html:: a ('update status','javascript:;', ['onclick'=>'update_status (this,'. $model - > ID.');]); }, ], ],
Пока нет, нам нужно написать на странице update_status реализации JS.
Общая форма Элементы представления формы
Textbox: textInput (); Password box: passwordInput (); Checkbox: radio (), radioList (); Check boxes: checkbox (), checkbox List (); Dropdown box: dropDownList (); Hidden domain: hiddenInput (); Textarea (['rows'=> 3]); File upload: fileInput (); Submit button: submitButton (); Reset Buttun ();
['test/post'],'method'=>'post','id'='uploadform', ]); ?> // Text input box field($model,'username')->textInput(['maxlength'=>20])?> // Password Input Box field($model,'password')->passwordInput(['maxlength'=>20])?> // radio box Echo $form - > field ($model,'sex') - > radioList (['1'=>'male','0'=>'female')?> // Drop-down Selection Box Echo $form - > field ($model,'edu') - > dropDownList (['1'=>'University','2'=>'High School'], ['prompt'=>'Please choose','style'=>'width: 120 px')?> DropDownList (['1'=>'University','2'=> High School')? // File upload box field($model,'file')->fileInput()?> // Check box Echo $form - > field ($model,'hobby') - > checkbox List (['0'=>'basketball','1'=>'football','2'=>'badminton','3'=>'table tennis')?> // Text input box field($model,'info')->textarea(['rows'=>3])?>field($model,'userid')->hiddenInput(['value'=>3])?> EchoHtml:: submitButton ('submit', ['class'=>'btn btn-primary','name'=>'submit-button')?> EchoHtml:: resetButton ('reset', ['class'=>'btn btn-primary','name'=>'submit-button')?>