YII CGridView CListView 返回列表带记忆功能

简介:

我们知道Yii 中的CGridview 很好用,但是有时候不能满足我们的页面高制定性,这个时候更加灵活的CListView(只支持CActiveDataProvider) 就可以帮助我们解决这些问题CListView好更容易排版面和样式。

CGridView是Yii中的一个灵活的插件GridView的每列为一个CGridColumn对象,通过Column加class来调用

例如它使用CButtonColumn来为每行生成按钮.在这里我们会介绍怎么根据需求自定义按钮.
默认按钮
默认情况下 CButtonColumn 包含三个按钮:{查看(view)},{更新(update)}和{删除(delete)} ,它们的含义是显而易见的.

自定义它们的外观和行为的最简单的方法是使用CButtonColumn的属性,如:

updateButtonImageUrl (更新update 按钮的图片路径),

updateButtonLabel (更新按钮的标签,没有经过HTML编码) ,

updateButtonOptions (更新按钮的HTML选项,向其他插件的htmlOptions 属性一样)和 updateButtonUrl (通过PHP表达式得出的URL).你可以找到每个按钮各自的属性.

此外:

  1. 只有删除(delete)按钮拥有 deleteConfirmation (string) 属性,它用作点击删除按钮后显示的自定义确认信息.
  2. 在 xxxButtonUrl 属性的 PHP 表达式中 $row 表示行号(从0开始),$data 表示数据模型(model),$this 表示列对象.
  3. 当你设置 xxxButtonImageUrl 的属性为空或 false 时,文本形式的链接将会代替图片显示或imageUrl'=>false

更灵活的定制

通过上面的属性自定义多个按钮在代码中时很混乱的,通过 模板(template) 和 按钮(buttons) 属性可以更灵活的自定义多个按钮。

你可以通过一下设置模板(template)属性的方式来构建或移除按钮.'header'  =>  '操作' ,  

Java代码   收藏代码
  1. array(  
  2.     'class'=>'CButtonColumn',  
  3.     'header' => '操作',  
  4.     'template'=>'{delete}{update}',                    
  5. ),  

在上例 CGridView 的按钮列中没有查看(view)按钮,而删除(delete)和更新(update)按钮为默认设置(删除按钮放到第一个位置).

隐藏按钮{update}{delete}

Java代码   收藏代码
  1. array(  
  2.     'class'=>'CButtonColumn',  
  3.     'deleteButtonOptions'=>array('style'=>'display:none'),  
  4.     'updateButtonOptions'=>array('style'=>'display:none'),  
  5.     'template'=>'{view}{update}{delete}',  
  6. ),  

同样你可以通过此属性添加新按钮 :{up}{down}

Java代码   收藏代码
  1. array(  
  2.     'class'=>'CButtonColumn',  
  3.     'template'=>'{up}{down}{delete}',  
  4. )   

对于新的按钮(当然已有的也一样)你必须指定外观和行为.CButtonColumn 的属性 buttons 就是用来做这的,它是由每个按钮的ID(名称必须和template 提供的相同)对应其属性组成的数组.

你可以使用一下代码:

Java代码   收藏代码
  1. 'buttonID' => array(  
  2.     'label'=>'...',     //按钮的文本标签.  
  3.     'url'=>'...',       //使用 PHP 表达式得出按钮的 URL.  
  4.     'imageUrl'=>'...',  //按钮的图片路径.  
  5.     'options'=>array(), //按钮的 HTML 选项.  
  6.     'click'=>'...',     //当点击按钮时调用的 javascript 函数  
  7.     'visible'=>'...',   //确定按钮是否显示的 PHP 表达式  
  8. )  

请注意: 当使用文字链接时 label 属性就会显示,当使用图片链接时 label 属性会被渲染为图片的 alt 参数.如果你想修改图片的 tooltip 文字,你可以修改 options 属性中的 title 参数,如:

Java代码   收藏代码
  1. 'buttonID' => array(  
  2.     'label' => 'Text shown as alt text to image or as label to text link...',  
  3.     'url' => '"#"',  
  4.     'visible' => '$data->score > 0',  
  5.     //'click'=>'function(){$("#dialog_id").dialog("open"); return false;}',  
  6.     'options' => array(  
  7.         'title' => 'Text shown as tooltip when user hovers image...',  
  8.         'onclick' => 'alert("确认要查看吗?");return false;',  
  9.     ),  
  10. ),   

此外:

  1. 在 url 和 visible 属性的 PHP 表达式中 $row 表示行号(从0开始),$data 表示数据模型(model),$this 表示列对象.
  2. 当你设置 xxxButtonImageUrl 的属性为空或 false 时,文本形式的链接将会代替图片显示.

最后这里有一个添加新按钮的例子:

Java代码   收藏代码
  1. array(  
  2.     'header'  =>'操作',  
  3.     'class'   =>'CButtonColumn',  
  4.     'template'=>'{email}',  
  5.     'buttons' =>array  (  
  6.         'email' => array  (  
  7.             'label'=>'Send an e-mail to this user',  
  8.             'imageUrl'=>Yii::app()->request->baseUrl.'/images/email.png',  
  9.             'visible'=>'$data->score > 0',  
  10.             'url'=>'Yii::app()->createUrl("users/email", array("id"=>$data->id))',  
  11.         )  
  12.     ),  
  13. )  

在上面的例子中同样可以看出怎么创建一个包含控制器视图和用户ID(或当前行的其他数据)的有效URL,同样也可以看出怎么使用 CHttpRequest 类中的 baseUrl 函数来设置存放在 protected 文件夹外的图片.

指定删除按钮的确认信息

你可能会注意到使用 Gii 生成的标准 CRUD 操作中的删除菜单项包含确认信息.这个信息可以很容易地 修改或扩展到数据中的指定记录,如记录ID.

因为 deleteConfirmation 属性不会在 CGridView 中的 CButtonColumn 中解析,所以实现不是这么简单,这里又一个巧妙的方式使用 jQuery 来实现它下面是例子:

Java代码   收藏代码
  1. array(  
  2.         'class'=>'CButtonColumn',  
  3.         'deleteConfirmation'=>"js:'Record with ID '+$(this).parent().parent().children(':first-child').text()+' will be deleted! Continue?'",  
  4. ),  
js
Java代码   收藏代码
  1. function getCheckList() {  
  2.     var data = new Array();  
  3.     $("input:checkbox[name='selectids[]']").each(function () {  
  4.         if ($(this).attr("checked") == 'checked') {  
  5.             data.push($(this).val());  
  6.         }  
  7.     });  
  8.     if (data.length > 0) {  
  9.         $.post("index.php?r=ip/delall", {'ids':data}, function (data) {  
  10.             if (data == 'ok') {  
  11.                 alert('删除成功!');  
  12.             }  
  13.         });  
  14.     } else {  
  15.         alert("请选择要删除的选项!");  
  16.     }  
  17. }  

序号,链接,复选框

如果你想链接单元格在网格视图中的内容,在订单列表中的某些页面,例如,如果你想客户的名称是管理客户的详细信息页面的链接,改变列CGrid查看
Java代码   收藏代码
  1. 'columns' => array(  
  2.     array(  
  3.         'class' => 'CCheckBoxColumn',  
  4.         'selectableRows' => 2,  
  5.         'footer' => '<button type="button" onclick="getCheckList();" style="width:76px">批量删除</button>',  
  6.         'headerHtmlOptions' => array('width' => '33px'),  
  7.         'headerTemplate'=>'{item}全选',  
  8.         'checkBoxHtmlOptions' => array('name' => 'selectids[]'),  
  9.         'disabled'=>'$data->status>0'//状态>0的禁用  
  10.         'checked'=>'$data->status>0',  
  11.     ),  
  12.     array(  
  13.         'name' => '序号'//$this->grid->dataProvider->getTotalItemCount() 总条数  
  14.         'value' => '$this->grid->dataProvider->getPagination()->getOffset()+($row+1)'//CDataColumn $this->grid  
  15.         'htmlOptions' => array(  
  16.             'width' => '5px',  
  17.         ),  
  18.     ),  
  19.     array(  
  20.         'type' => 'html'//link  
  21.         'value' => 'CHtml::link( $data->name,Yii::app()->createUrl( "admin/view", array("id"=>$data->user_id, "m"=>"users")) )',  
  22.     ),  
  23.     array(  
  24.         'name' => 'orderby',  
  25.         'type' => 'raw',  
  26.         'value' => 'CHtml::textField("id[$data->id]", $data->orderby)'   
  27.     ),  
  28.     array(  
  29.          'name'=>'orders.status'//使用外联表的label  
  30.          'value'=>'Orders::model()->getOrderStatusList($data->orders->status)'  
  31.     ),  
  32.     array(  
  33.         'name' => 'type',//失败是红色,成功是绿色  
  34.         'type'=>'raw',  
  35.         'value' => 'CHtml::tag("font",array("color"=>$data->type?"red":"green"),$data->getTypeList($data->type))'  
  36.     ),  
  37.     array(  
  38.         'filter' => CHtml::listData($list, 'id''name'), //select filter  
  39.         'name' => 'offer_id',  
  40.         'value' => '$data->offer->name'  
  41.     ),  
  42. )  

"Type"代表属性的类型.它确定属性值怎样被格式化和显示. 它默认为'text'. "Type"应该CFormatter被识别, 这些"Type"值是有效的: raw , text, ntext, html, date, time, datetime , boolean, number, email , image , url

返回列表带记忆功能:如果存在多页文章数据,在界面上浏览到后面的文章页,然后查看某个文章的信息,这个时候再回退的时候,总是返回到列表的第一页,而不是刚才的历史页面。把列表视图(List.php)中把该CGridView/CListView的enableHistory属性设置为true

然后在查看视图(View.php)中使用如下的语句达到返回历史页面的效果:

Java代码   收藏代码
  1. <div class="Action">  
  2. <?php echo XHtml::link(Yii::t('Trade','Back'), Yii::app()->request->urlReferrer); ?>  
  3. </div>  

 再进一步,如果要在这个查看页面进行审核操作,希望审核操作后也退回列表历史页面,那么单单使用urlReferrer就不行了,因为它对于审核动作的处理逻辑而言记录了查看页面的url.

通用做法将当前页面的地址(包括参数)存起来(如果是post参数存cookie之类的)可以在查看页面中放一个隐藏字段:

Java代码   收藏代码
  1. <input type="hidden" value=<?php echo Yii::app()->request->urlReferrer;?> id="backurl" name="backurl">  
也就是把列表历史页面的路径做为请求参数传
Java代码   收藏代码
  1. $this->redirect($_POST['backurl']);  
 
 
相关文章
|
3月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
68 1
前端基础(十四)_隐藏元素的方法
|
2月前
|
JavaScript 前端开发 API
《vue3第六章》其他,包含:全局API的转移、其他改变
《vue3第六章》其他,包含:全局API的转移、其他改变
23 0
|
4月前
|
开发框架 缓存 前端开发
基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换
基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换
|
7月前
uni-app 76聊天类封装(十一)-更新会话列表(二)
uni-app 76聊天类封装(十一)-更新会话列表(二)
45 1
|
JavaScript 前端开发 数据可视化
列表封装-递归数据回显-全局数据挂载——基础积累
列表封装-递归数据回显-全局数据挂载——基础积累
105 0
|
存储 PHP
php开发实战分析(2):cookie的动态使用(设置、获取、删除、猜你喜欢原理、购物车调用)
php开发实战分析(2):cookie的动态使用(设置、获取、删除、猜你喜欢原理、购物车调用)
219 0
|
JSON 前端开发 数据格式
前端(二十一):label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑
label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑
159 0
|
SQL JavaScript 关系型数据库
API接口获得数据后处理JS数组(包含字符串对象)分组、过滤和筛选的解决方案
API接口获得数据后处理JS数组(包含字符串对象)分组、过滤和筛选的解决方案
166 0
|
前端开发
前端知识学习案例5vs code-搜索和替换全局内容
前端知识学习案例5vs code-搜索和替换全局内容
83 0
前端知识学习案例5vs code-搜索和替换全局内容
|
前端开发
#yyds干货盘点 【React工作记录十七】根据数组code值返回value值
#yyds干货盘点 【React工作记录十七】根据数组code值返回value值
82 0