带有按钮下拉菜单的 Twitter Bootstrap 的 CGridView 中的自定义列 [英] Custom column in CGridView with Button dropdowns's Twitter Bootstrap
问题描述
我只是为 CGridView 列创建了 Button dropdowns 的 Twitter Bootstrap.按钮包含子菜单,每个子菜单都有href、class、data-等属性,可以通过CGridView小部件中的dropdownMenuItems属性设置.
在视图中
$this->widget('zii.widgets.grid.CGridView', array('dataProvider'=>$dataProvider,'ajaxUpdate'=>false,'列'=>数组(大批('姓名'=>'身份证','类型'=>'原始','value'=>'$data->ID',),大批('姓名'=>'姓名','类型'=>'原始','value'=>'$data->NAME',),大批('class'=''BootstrapButtonDropdownColumn','姓名'=>'','可排序'=>假,'下拉菜单项'=>数组(array('label'=>'<i class="icon-edit"></i> Edit', 'link'=>$this->createUrl('site/update')),数组('itemClass'='divider'),array('label'=>'<i class="icon-remove"></i> Remove', 'link'=>'#', 'itemHtmlOptions'=>array('class'=>'remove-item','data-id'=>'$data->ID','data-toggle'='modal'))),),),
类文件
class BootstrapButtonDropdownColumn 扩展 CDataColumn {公共 $buttonLabel = '动作';public $buttonClass = 'btn btn-small dropdown-toggle';公共 $buttonHtmlOptions=array();公共 $dropdownMenuItems=array();受保护的函数 renderDataCellContent($row, $data){$html = '';$buttonOption = $this->buttonHtmlOptions;$buttonOption['class'] = $this->buttonClass;$buttonOption['data-toggle'] = '下拉菜单';$html .= CHtml::htmlButton($this->buttonLabel .' <span class="caret"></span>', $buttonOption);$html .= '';for ($i=0; $idropdownMenuItems); $i++){if (isset($this->dropdownMenuItems[$i]['itemClass']))$html .= '<li class="' . $this->dropdownMenuItems[$i]['itemClass'] .'">';别的$html .='- ';$标签 = '';$link = '#';$itemHtmlOptions = null;if (isset($this->dropdownMenuItems[$i]['label']))$label = $this->dropdownMenuItems[$i]['label'];if (isset($this->dropdownMenuItems[$i]['link']) && !empty($this->dropdownMenuItems[$i]['link']))$link = $this->dropdownMenuItems[$i]['link'];if (isset($this->dropdownMenuItems[$i]['itemHtmlOptions']))$itemHtmlOptions = $this->dropdownMenuItems[$i]['itemHtmlOptions'];$html .= CHtml::link($label, $link, $itemHtmlOptions);$html .='
';}$html .= '</ul></div>';回声 $html;}}有一个问题,我想在删除菜单项上将值设置为 data-id 属性,但它不起作用.当在浏览器元素检查中看到 data-id 不包含记录 id 但它显示字符串 $data->id 代替.
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown" name="yt0" type="button">操作 </span>按钮><ul class="下拉菜单"><li><a href="/site/update"><i class="icon-edit"></i>编辑</a></li><li class="divider"><a href="#"></a></li><li><a class="remove-item" data-id="$data->ID" data-toggle="modal" href="#"><i class="icon-remove"></i>删除</a></li>
或查看此图片
请给我一些建议,谢谢.
解决方案 感谢您的建议,但是有没有其他方法可以将 id 传递到类中
您可以访问 $row
和 $data
.我认为您只需要在自定义按钮类中添加更多以下行
if (isset($this->dropdownMenuItems[$i]['itemHtmlOptions'])){$itemHtmlOptions = $this->dropdownMenuItems[$i]['itemHtmlOptions'];$itemHtmlOptions['data-id'] = $data->ID;//<==添加的行,也许你想使用条件或把它放在其他地方,取决于你的决定}
当然,现在您不再需要 'data-id'=>$data->ID
从您的视图中删除它.
I just create Button dropdowns's Twitter Bootstrap for CGridView column. The button contains sub menus and each of them has attributes such as href, class, data-, etc.. which can set through dropdownMenuItems attribute in CGridView widget.
In view
$this->widget('zii.widgets.grid.CGridView', array(
'dataProvider'=>$dataProvider,
'ajaxUpdate'=>false,
'columns'=>array(
array(
'name'=>'ID',
'type'=>'raw',
'value'=>'$data->ID',
),
array(
'name'=>'NAME',
'type'=>'raw',
'value'=>'$data->NAME',
),
array(
'class'=>'BootstrapButtonDropdownColumn',
'name'=>'',
'sortable'=>false,
'dropdownMenuItems'=>array(
array('label'=>'<i class="icon-edit"></i> Edit', 'link'=>$this->createUrl('site/update')),
array('itemClass'=>'divider'),
array('label'=>'<i class="icon-remove"></i> Remove', 'link'=>'#', 'itemHtmlOptions'=>array('class'=>'remove-item','data-id'=>'$data->ID','data-toggle'=>'modal'))
),
),
),
Class file
class BootstrapButtonDropdownColumn extends CDataColumn {
public $buttonLabel = 'Action';
public $buttonClass = 'btn btn-small dropdown-toggle';
public $buttonHtmlOptions=array();
public $dropdownMenuItems=array();
protected function renderDataCellContent($row, $data)
{
$html = '<div class="btn-group pull-right">';
$buttonOption = $this->buttonHtmlOptions;
$buttonOption['class'] = $this->buttonClass;
$buttonOption['data-toggle'] = 'dropdown';
$html .= CHtml::htmlButton($this->buttonLabel . ' <span class="caret"></span>', $buttonOption);
$html .= '<ul class="dropdown-menu">';
for ($i=0; $i<count($this->dropdownMenuItems); $i++)
{
if (isset($this->dropdownMenuItems[$i]['itemClass']))
$html .= '<li class="' . $this->dropdownMenuItems[$i]['itemClass'] . '">';
else
$html .= '<li>';
$label = '';
$link = '#';
$itemHtmlOptions = null;
if (isset($this->dropdownMenuItems[$i]['label']))
$label = $this->dropdownMenuItems[$i]['label'];
if (isset($this->dropdownMenuItems[$i]['link']) && !empty($this->dropdownMenuItems[$i]['link']))
$link = $this->dropdownMenuItems[$i]['link'];
if (isset($this->dropdownMenuItems[$i]['itemHtmlOptions']))
$itemHtmlOptions = $this->dropdownMenuItems[$i]['itemHtmlOptions'];
$html .= CHtml::link($label, $link, $itemHtmlOptions);
$html .= '</li>';
}
$html .= '</ul></div>';
echo $html;
}
}
There's a problem, I'd like to set value to data-id attribute on remove menu item but it not work. When see in Browser Element Inspect the data-id not contain record id but it show string $data->id instead.
<div class="btn-group pull-right open">
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown" name="yt0" type="button">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="/site/update"><i class="icon-edit"></i> Edit</a></li>
<li class="divider"><a href="#"></a></li>
<li><a class="remove-item" data-id="$data->ID" data-toggle="modal" href="#"><i class="icon-remove"></i> Remove</a></li>
</ul>
</div>
or see in this image
Please give me some advice, Thank you.
解决方案
Thank for advice but, Is there another way to pass id into class
You have ability to access $row
and $data
. I think all you need just add more below line into your custom button class
if (isset($this->dropdownMenuItems[$i]['itemHtmlOptions'])){
$itemHtmlOptions = $this->dropdownMenuItems[$i]['itemHtmlOptions'];
$itemHtmlOptions['data-id'] = $data->ID; // <==added line, maybe you want to use condition or put it somewhere else instead, depend your decision
}
Of cause now you don't need 'data-id'=>$data->ID
from your view anymore, remove it.
这篇关于带有按钮下拉菜单的 Twitter Bootstrap 的 CGridView 中的自定义列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文