我只是为 CGridView 列创建Button 下拉列表的 Twitter Bootstrap。按钮包含子菜单,每个子菜单都有href、class、data-等属性。可以通过CGridView小部件中的dropdownMenuItems属性进行设置。
在视图中
$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;
}
}
有一个问题,我想在删除菜单项上为 data-id 属性设置值,但它不起作用。当在浏览器元素中查看时,数据 ID 不包含记录 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>
或在这张图片中看到
请给我一些建议,谢谢。