Table des matières
yii2 GridView常见操作,yii2gridview
下拉搜索,我们先来看看预期的效果图
日期格式化,我们先来看看效果图
是否显示某列案例
链接可点击跳转案例
显示图片案例
html渲染案例
自定义按钮案例
设定宽度案例
自定义字段案例
自定义行样式
增加按钮调用js操作案例
Maison php教程 php手册 yii2 GridView常见操作,yii2gridview

yii2 GridView常见操作,yii2gridview

Jun 13, 2016 am 08:41 AM
yii2 常见 操作

yii2 GridView常见操作,yii2gridview

作者:白狼 出处:http://www.manks.top/article/yii2_gridview

本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

收集了网络上GridView出现的大部分问题做一个总结,希望有一个能帮助到你。

如果下面有没说到的GridView常见问题,下方留言,我会进行补充。

  • 下拉搜索

  • 日期格式化并实现日期可搜索

  • 根据参数进行是否显示

  • 链接可点击跳转

  • 显示图片

  • html渲染

  • 自定义按钮

  • 设定宽度等样式 

  • 自定义字段

  • 自定义行样式

  • 增加按钮调用js操作

下拉搜索,我们先来看看预期的效果图

具体怎么实现喃?考虑到一张数据表要下拉效果的字段可能有很多个,我们先在其model中实现一个方法方便后续操作

<span> 1</span> <span>/*</span><span>*
</span><span> 2</span> <span> *  下拉筛选
</span><span> 3</span> <span> *  @column string 字段
</span><span> 4</span> <span> *  @value mix 字段对应的值,不指定则返回字段数组
</span><span> 5</span> <span> *  @return mix 返回某个值或者数组
</span><span> 6</span>  <span>*/</span>
<span> 7</span> <span>public</span> <span>static</span> <span>function</span> dropDown (<span>$column</span>, <span>$value</span> = <span>null</span><span>)
</span><span> 8</span> <span>{
</span><span> 9</span>     <span>$dropDownList</span> =<span> [
</span><span>10</span>         'is_delete'=><span> [
</span><span>11</span>             '0'=>'显示',
<span>12</span>             '1'=>'删除',
<span>13</span>         ],
<span>14</span>         'is_hot'=><span> [
</span><span>15</span>             '0'=>'否',
<span>16</span>             '1'=>'是',
<span>17</span>         ],
<span>18</span>         <span>//</span><span>有新的字段要实现下拉规则,可像上面这样进行添加
</span><span>19</span> <span>        // ......</span>
<span>20</span> <span>    ];
</span><span>21</span>     <span>//</span><span>根据具体值显示对应的值</span>
<span>22</span>     <span>if</span> (<span>$value</span> !== <span>null</span><span>) 
</span><span>23</span>         <span>return</span> <span>array_key_exists</span>(<span>$column</span>, <span>$dropDownList</span>) ? <span>$dropDownList</span>[<span>$column</span>][<span>$value</span>] : <span>false</span><span>;
</span><span>24</span>     <span>//</span><span>返回关联数组,用户下拉的filter实现</span>
<span>25</span>     <span>else</span>
<span>26</span>         <span>return</span> <span>array_key_exists</span>(<span>$column</span>, <span>$dropDownList</span>) ? <span>$dropDownList</span>[<span>$column</span>] : <span>false</span><span>;
</span><span>27</span> }
Copier après la connexion

然后我们上代码看看具体怎么实现的下拉搜索

<?= GridView::<span>widget([
    </span>'dataProvider' => <span>$dataProvider</span>,
    'columns' =><span> [
        </span><span>//</span><span> ......</span>
<span>        [
            </span>'attribute' => 'is_hot',
            'value' => <span>function</span> (<span>$model</span><span>) {
                </span><span>return</span> Article::dropDown('is_hot', <span>$model</span>-><span>is_hot);
            }</span>,
            'filter' => Article::dropDown('is_hot'),<span>
        ]</span>,<span>
        [
            </span>'attribute' => 'is_delete',
            'value' => <span>function</span> (<span>$model</span><span>) {
                </span><span>return</span> Article::dropDown('is_delete', <span>$model</span>-><span>is_delete);
            }</span>,
            'filter' => Article::dropDown('is_delete'),<span>
        ]</span>,
        <span>//</span><span> ......</span>
    ],<span>
]); </span>?>
Copier après la connexion

像这样,我们就简单地实现了两个下拉效果,要实现筛选功能,在你的dataProvider自定添加该字段的搜索条件即可

日期格式化,我们先来看看效果图

这个我们分情况讨论

1、如果你的数据库字段created_at存的时间格式是date或者datetime,那很简单,gridview中直接输出该字段created_at即可,如上图中右侧所示

2、如果数据库存入的时间戳类型,如上图中左侧所示,则需要像下面这样进行输出

<span>[
    </span>'attribute' => 'created_at',
    'value' => <span>function</span> (<span>$model</span><span>) {
        </span><span>return</span> <span>date</span>('Y-m-d H:i:s', <span>$model</span>-><span>created_at);
    }</span>,<span>
]</span>,<span>
[
    </span>'attribute' => 'created_at',
    'format' => ['date', 'Y-m-d H:i:s'],<span>
]</span>,
Copier après la connexion

以上展示了两种方式进行格式输出,都可以。但是,如果想要实现搜索的机制,如果你的数据库存入的是datetime型,很方便,dataProvider不用做修改,

代码如下

<span>$query</span>-><span>andFilterWhere([
    </span><span>//</span><span> ......</span>
    'created_at' => <span>$this</span>->created_at,
    <span>//</span><span> ......</span>
]);
Copier après la connexion

如果你的数据库存入的是时间戳,

第一步,修改对应规则如下图所示

第二步,修改dataProvider可参考如下代码

<span>//</span><span>我们搜索输入框中输入的格式一般是 2016-01-01 而非时间戳
//输出2016-01-01无非是想搜索这一天的数据,因此代码如下</span>
<span>if</span> (<span>$this</span>-><span>created_at) {
    </span><span>$createdAt</span> = <span>strtotime</span>(<span>$this</span>-><span>created_at);
    </span><span>$createdAtEnd</span> = <span>$createdAt</span> + 24*3600<span>;
    </span><span>$query</span>->andWhere("created_at >= {<span>$createdAt</span>} AND created_at <= {<span>$createdAtEnd</span>}"<span>);
}</span>
Copier après la connexion

这里做个小总结,建议使用datetime类型,个人觉得存时间戳甚是麻烦,如果你有好的建议,下方留言我们共同交流。

是否显示某列案例

我们举一个简单的案例

条件:有一个get形参数type

需求:仅且type的值等于1的时候,列name才显示,否则该列不显示

代码实现如下:

<span>[
    </span>'attribute' => 'name',
    'value' => <span>$model</span>->name,
    'visible' => <span>intval</span>(Yii::<span>$app</span>->request->get('type')) == 1,<span>
]</span>,
Copier après la connexion

实现方式也是很简单滴。

链接可点击跳转案例

这个跟接下来我们要说的html渲染的效果十分类似,这里要说的是列的属性值 format,具体都有哪些格式可查看文件 yii\i18n\Formatter.php,各种format都可以解决

<span>[
    </span>'attribute' => 'order_id',
    'value' => <span>function</span> (<span>$model</span><span>) {
        </span><span>return</span> Html::a(<span>$model</span>->order_id, "/order?id={<span>$model</span>->order_id}", ['target' => '_blank'<span>]);
    }</span>,
    'format' => 'raw',<span>
]</span>,
Copier après la connexion

显示图片案例

同上,这里只需要指定format格式为image即可,format第二个参数可设定图片大小,可参考下面的代码

<span>[
    </span>'label' => '头像',
    'format' =><span> [
    </span>'image',<span> 
    [
    </span>'width'=>'84',
    'height'=>'84'<span>
    ]
    ]</span>,
    'value' => <span>function</span> (<span>$model</span><span>) { 
    </span><span>return</span> <span>$model</span>-><span>image; 
    }
]</span>,
Copier après la connexion

html渲染案例

什么意思喃,举个例子,我们有一个字段,标记为title,但是这个title不一样,ta含有html标签,我们不想在页面上展示

title123

这种形式,我们想要title123以p标签的形式展示,代码可参考如下,只需要指定format为raw形式即可

<span>[
    </span>'attribute' => 'title',
    'value' => <span>function</span> (<span>$model</span><span>) { 
    </span><span>return</span> Html::encode(<span>$model</span>-><span>title); 
    }</span>,
    'format' => 'raw',<span>
]</span>,
Copier après la connexion

自定义按钮案例

往往列表页我们不想要删除按钮,想在增加一个比如获取xxx按钮,怎么搞呢?这里需要设置ActionColumn类,修改配置项template并在buttons项增加template里增加的get-xxx即可

<span>[
    </span>'class' => 'yii\grid\ActionColumn',
    'template' => '{get-xxx} {view} {update}',
    'header' => '操作',
    'buttons' =><span> [
        </span>'get-xxx' => <span>function</span> (<span>$url</span>, <span>$model</span>, <span>$key</span><span>) { 
        </span><span>return</span> Html::a('获取xxx', <span>$url</span>, ['title' => '获取xxx'<span>] ); 
        }</span>,<span>
    ]</span>,<span>
]</span>,
Copier après la connexion

设定宽度案例

举个简单的例子,我们的title列,太长了,能不能给我先定下这一列的宽度?

答案:能。

请看示例:

<span>[
    </span>'attribute' => 'title',
    'value' => 'title',
    'headerOptions' => ['width' => '100'],<span>
]</span>,
Copier après la connexion

只需要指定配置项headerOptions即可。

自定义字段案例

啥时自定义?这里我们是指在表格里增加一列且数据库中不存在对应的列。假如我们新增一列 订单消费金额money且该表不存在该字段

<span>[
    </span>'attribute' => '消费金额',
    'value' => <span>function</span> (<span>$model</span><span>) {
        </span><span>//</span><span> 这里可以根据该表的其他字段进行关联获取</span>
<span>    }
]</span>,
Copier après la connexion

自定义行样式

有小伙伴说了,gii生成的这个gridview表格呀,行跟行的颜色不明显,看着难受,我滴乖乖,具体怎么难受咱们就不追究了。我们来看看怎么定义行样式

<?= GridView::<span>widget([
</span><span>//</span><span> ......</span>
    'dataProvider' => <span>$dataProvider</span>,
    'rowOptions' => <span>function</span>(<span>$model</span>, <span>$key</span>, <span>$index</span>, <span>$grid</span><span>) {
        </span><span>return</span> ['class' => <span>$index</span> % 2 ==0 ? 'label-red' : 'label-green'<span>];
    }</span>,
    <span>//</span><span> ......</span>
]); ?>
Copier après la connexion

前面的操作我们都是依据列column的,这里因为是对行的控制,所以我们配置rowOptions要稍微注意一下。此外,自定义的label-red和label-green需要有对应的样式实现,这里我们看一下页面的实际效果

增加按钮调用js操作案例

那边产品经理走过来了,小王呀,你这个修改状态的功能很频繁,每次都要先点进详情页才能修改,能不能我在列表页面上鼠标那么一点就成功修改了呢?

其实就是一个异步请求操作了当前行的状态嘛,我们来看看gridview里面是怎么实现的。

<span>[
    </span>'class' => 'yii\grid\ActionColumn',
    'header' => '操作',
    'template' => '{view} {update} {update-status}',
    'buttons' =><span> [
        </span>'update-status' => <span>function</span> (<span>$url</span>, <span>$model</span>, <span>$key</span><span>) {
            </span><span>return</span> Html::a('更新状态', 'javascript:;', ['onclick'=>'update_status(this, '.<span>$model</span>->id.');']); },<span>
    ]</span>,<span>
]</span>,
Copier après la connexion

 

还没完,我们还需要在页面写js实现方法 update_status, 关于如何在页面底部加载js请点击参考

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Tutoriel d'utilisation de PyCharm : vous guide en détail pour exécuter l'opération Tutoriel d'utilisation de PyCharm : vous guide en détail pour exécuter l'opération Feb 26, 2024 pm 05:51 PM

Tutoriel d'utilisation de PyCharm : vous guide en détail pour exécuter l'opération

Qu'est-ce que sudo et pourquoi est-ce important ? Qu'est-ce que sudo et pourquoi est-ce important ? Feb 21, 2024 pm 07:01 PM

Qu'est-ce que sudo et pourquoi est-ce important ?

Étapes et précautions de fonctionnement de Linux Deploy Étapes et précautions de fonctionnement de Linux Deploy Mar 14, 2024 pm 03:03 PM

Étapes et précautions de fonctionnement de Linux Deploy

Comment désactiver le bouton d'action sur iPhone 15 Pro et 15 Pro Max Comment désactiver le bouton d'action sur iPhone 15 Pro et 15 Pro Max Nov 07, 2023 am 11:17 AM

Comment désactiver le bouton d'action sur iPhone 15 Pro et 15 Pro Max

Boutons d'action personnalisés : explorez la personnalisation sur iPhone 15 Pro Boutons d'action personnalisés : explorez la personnalisation sur iPhone 15 Pro Sep 24, 2023 pm 03:05 PM

Boutons d'action personnalisés : explorez la personnalisation sur iPhone 15 Pro

Que faire si vous oubliez d'appuyer sur F2 pour le mot de passe de démarrage Win10 Que faire si vous oubliez d'appuyer sur F2 pour le mot de passe de démarrage Win10 Feb 28, 2024 am 08:31 AM

Que faire si vous oubliez d'appuyer sur F2 pour le mot de passe de démarrage Win10

Partage des étapes d'opération de capture d'écran du Huawei Mate60 Pro Partage des étapes d'opération de capture d'écran du Huawei Mate60 Pro Mar 23, 2024 am 11:15 AM

Partage des étapes d'opération de capture d'écran du Huawei Mate60 Pro

Surveillance du défilement des pages Web CSS : surveillez les événements de défilement des pages Web et effectuez les opérations correspondantes Surveillance du défilement des pages Web CSS : surveillez les événements de défilement des pages Web et effectuez les opérations correspondantes Nov 18, 2023 am 10:35 AM

Surveillance du défilement des pages Web CSS : surveillez les événements de défilement des pages Web et effectuez les opérations correspondantes

See all articles