Yii2 - 如何使用分页将 JQuery 工具提示添加到 GridView
Yii2 - How to add JQuery tooltip to GridView with pagination
如何向 GridView 中的列数据添加工具提示?它在第一页上有效,但在切换到不同的页面后,工具提示不起作用。
主布局文件:
\yii\web\JqueryAsset::register($this);
\yii\bootstrap\BootstrapPluginAsset::register($this);
$js = <<< 'SCRIPT'
/* To initialize BS3 tooltips set this below */
$(function () {
$("[data-toggle='tooltip']").tooltip();
});;
/* To initialize BS3 popovers set this below */
$(function () {
$("[data-toggle='popover']").popover();
});
SCRIPT;
// Register tooltip/popover initialization javascript
$this->registerJs($js);
来自视图的代码:
[ 'class' => '\kartik\grid\DataColumn',
'attribute'=>'default_rate_id',
'value'=>function($data) {
if(isset($data->rate->code)) {
return Html::tag('div', $data->rate->code, ['data-toggle'=>'tooltip','data-placement'=>'left','title'=>$data->rate->name,'style'=>'cursor:default;']);
} else {
return '';
}
},
'width' => '60px',
'filterType'=>GridView::FILTER_SELECT2,
'filterWidgetOptions'=>[
'pluginOptions' =>['allowClear' =>true],
'data' => $this->listRateCodes(),
],
'filterInputOptions' =>['placeholder' =>' '],
'format'=>'raw',
],
解法:
感谢@arogachev,我已将主布局文件中的相应部分更新如下。工具提示现在显示在 GridView 的每个页面上。
$js = <<< 'SCRIPT'
/* To initialize BS3 tooltips set this below */
$('body').tooltip({selector: '[data-toggle="tooltip"]'});
/* To initialize BS3 popovers set this below */
$('body').popover({selector: '[data-toggle="popover"]'});
SCRIPT;
// Register tooltip/popover initialization javascript
$this->registerJs($js);
发生这种情况是因为在这种情况下 GridView
的内容是动态的,并且随着每个 AJAX
请求而改变。在第一个页面加载时它可以工作,因为还没有任何改变,但是一旦内容被改变它就不会了。
解决方案是改变指定工具提示的方式 jQuery
:
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
查看这些相关问题:
How do I bind Twitter Bootstrap tooltips to dynamically created elements?
How to bind bootstrap tooltip on dynamic elements
如何向 GridView 中的列数据添加工具提示?它在第一页上有效,但在切换到不同的页面后,工具提示不起作用。
主布局文件:
\yii\web\JqueryAsset::register($this);
\yii\bootstrap\BootstrapPluginAsset::register($this);
$js = <<< 'SCRIPT'
/* To initialize BS3 tooltips set this below */
$(function () {
$("[data-toggle='tooltip']").tooltip();
});;
/* To initialize BS3 popovers set this below */
$(function () {
$("[data-toggle='popover']").popover();
});
SCRIPT;
// Register tooltip/popover initialization javascript
$this->registerJs($js);
来自视图的代码:
[ 'class' => '\kartik\grid\DataColumn',
'attribute'=>'default_rate_id',
'value'=>function($data) {
if(isset($data->rate->code)) {
return Html::tag('div', $data->rate->code, ['data-toggle'=>'tooltip','data-placement'=>'left','title'=>$data->rate->name,'style'=>'cursor:default;']);
} else {
return '';
}
},
'width' => '60px',
'filterType'=>GridView::FILTER_SELECT2,
'filterWidgetOptions'=>[
'pluginOptions' =>['allowClear' =>true],
'data' => $this->listRateCodes(),
],
'filterInputOptions' =>['placeholder' =>' '],
'format'=>'raw',
],
解法:
感谢@arogachev,我已将主布局文件中的相应部分更新如下。工具提示现在显示在 GridView 的每个页面上。
$js = <<< 'SCRIPT'
/* To initialize BS3 tooltips set this below */
$('body').tooltip({selector: '[data-toggle="tooltip"]'});
/* To initialize BS3 popovers set this below */
$('body').popover({selector: '[data-toggle="popover"]'});
SCRIPT;
// Register tooltip/popover initialization javascript
$this->registerJs($js);
发生这种情况是因为在这种情况下 GridView
的内容是动态的,并且随着每个 AJAX
请求而改变。在第一个页面加载时它可以工作,因为还没有任何改变,但是一旦内容被改变它就不会了。
解决方案是改变指定工具提示的方式 jQuery
:
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
查看这些相关问题:
How do I bind Twitter Bootstrap tooltips to dynamically created elements?
How to bind bootstrap tooltip on dynamic elements