zoukankan      html  css  js  c++  java
  • Yii2之ListView小部件

      ListViewyii框架中类似GridView,也是用于展示多条数据的小部件,相比GridViewListView可以更加灵活地设置数据展示的格式。

    下面以我自己做的一个使用ListView来展示数据的例子,来简单讲解一下ListView小部件的使用。

           首先需要在控制器中new一个数据提供器,传给视图,示例代码如下:

    public function actionIndex() {
    	$dataProvider = new ActiveDataProvider([
    		'query' => Diary::find()->orderBy('day'),
    		'pagination' => [//分页
    			'pagesize' => 4
    		]
    	]);
    	return $this->render('index', [
    		'dataProvider' => $dataProvider
    	]);
    }

      接下来就是在视图文件中使用ListView来展示数据了,示例代码如下:

    <?= ListView::widget([
    	'dataProvider' => $dataProvider,//数据提供器
    	'itemView' => '_diary',//指定item视图(该视图文件与当前视图在同一个目录下)
    	'viewParams' => [//传参数给每一个item
    		'moodCfg' => Mood::getAll()
    	],
    	'layout' => '{items}<div class="col-lg-12 sum-pager">{summary}{pager}</div>',//整个ListView布局
    	'itemOptions' => [//针对渲染的单个item
    		'tag' => 'div',
    		'class' => 'col-lg-3'
    	],
    	/*
    	'options' => [//针对整个ListView
    		'tag' => 'div',
    		'class' => 'col-lg-3'
    	],
    	*/
    	'pager' => [
    		//'options' => ['class' => 'hidden'],//关闭分页(默认开启)
    		/* 分页按钮设置 */
    		'maxButtonCount' => 5,//最多显示几个分页按钮
    		'firstPageLabel' => '首页',
    		'prevPageLabel' => '上一页',
    		'nextPageLabel' => '下一页',
    		'lastPageLabel' => '尾页'
    	]
    ]);?>

      这里说明一下,由于ListViewGridView继承于同一个父类BaseListView,所以有很多设置参数是一样的,可以通过参考

    GridView的参数设置来设置ListView,关于GridView小部件的使用可以参考我的另一篇博文——yii2之GridView小部件

           最后就是在ListView'itemView'参数指定的视图文件中来编写每一条数据的展示格式了,示例代码如下:

    <div class="item">
    	<h4 style="font-weight:bold"><?= Html::encode($model->title ? $model->title : '(无题)') ?></h4>
    	
    	<p style="font-size:13px">
    		<span style="color:orangered"><?= date('Y.m.d', $model->day) ?></span><br>
    		<span style="color:#999">心情:<?= $moodCfg[$model->mood] ?></span>//这里访问ListView的'viewParams'参数传过来的参数$moodCfg
    	</p>
    	
    	<div style="margin:15px 0">
    		      
    		<?php echo HtmlPurifier::process(mb_substr($model->content, 0, 25).'......'); ?>
    	</div>
    	
    	<p class="info">
    		添加:<?= date('Y-m-d H:i:s', $model->created_at) ?><br>
    		最后修改:<?= date('Y-m-d H:i:s', $model->updated_at) ?>
    	</p>
    	
    	<div style="text-align:right">
    		<?= Html::a('<span class="glyphicon glyphicon-eye-open"></span>', ['view', 'id' => $model->id], ['title' => '查看']) ?>
    		<?= Html::a('<span class="glyphicon glyphicon-pencil"></span>', ['upcreate', 'id' => $model->id], ['title' => '修改']) ?>
    		<?= Html::a('<span class="glyphicon glyphicon-trash"></span>', ['delete', 'id' => $model->id], [
    			'title' => '删除',
    			'data' => [
    				'confirm' => '您确定真的要删除 '.date('Y年m月d日', $model->day).' 的日记吗?',
    				'method' => 'post',
    			]
    		]) ?>
    	</div>
    </div>

      最后的最后,效果图展示时间(略丑,勿怪):

     

     

     

  • 相关阅读:
    斐波那契数列 的两种实现方式(Java)
    单链表反转
    单链表合并
    两个有序list合并
    list去重 转载
    RemoveAll 要重写equals方法
    Java for LeetCode 138 Copy List with Random Pointer
    Java for LeetCode 137 Single Number II
    Java for LeetCode 136 Single Number
    Java for LeetCode 135 Candy
  • 原文地址:https://www.cnblogs.com/wujuntian/p/7424074.html
Copyright © 2011-2022 走看看