ボタン ドロップダウンの Twitter Bootstrap for CGridView 列を作成するだけです。ボタンにはサブ メニューが含まれており、それぞれに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 属性に値を設定したいのですが、うまくいきません。Browser Element Inspect で見ると、data-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>
またはこの画像で見る
アドバイスをください、ありがとう。