我刚刚为CGridView列创建Button dropdowns's Twitter Bootstrap。该按钮包含子菜单,并且它们中的每一个都具有诸如href,class,data-等的属性。它们可以通过设置为下拉菜单项属性在CGridView小部件中。CGridView自定义列与按钮下拉的Twitter引导
鉴于
$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 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;
}
}
有一个问题,我想设置值数据-id属性上删除的菜单项,但它不能正常工作。当在浏览器元素检查中看到时,data-id不包含记录编号,但它显示字符串$ data-> id代替。
<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>
或看到在这个image
请给我一些建议,谢谢。
指向该页面或截图的链接将有所帮助。 –
这很奇怪,即使它错了,它应该显示$ data-> ART_CAT_ID而不是$ data-> ID –
您的代码错误,因为您无法访问$ data,而html选项会直接传递到自定义类像什么'价值'对待列表达式 –