Bootstrap气泡弹出框（Popovers）集成到easyui列表

Bootstrap气泡弹出框（Popovers）集成到easyui列表

步骤一、引入bootstrap文件

<link rel="stylesheet" href="../../common/plugins/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="../../common/plugins/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>

步骤二、easyui表格

<table id="dg"></table>  

步骤三、javascript代码

表格操作列渲染formatter：

$('#dg').datagrid({    tableId: 'filesTable', //表格Idurl:'datagrid_data.json',    columns:[[    {field: 'fileName', title: '文件名称', width: '100%', align: 'left',halign:'center', formatter: formatOper}]]    
}); 

操作列渲染，加要传递的参数属性及data-toggle='popover'

 //操作列
function formatOper(value, row, index) {return "<a id='"+row.fId+"' data-toggle='popover' data-container='body'>"+ value+ "</a>";         
}

表格加载完成，处理气泡块(传递参数到气泡块渲染)

//表格加载完成，处理渲染的气泡按钮
$("#filesTable").datagrid({onLoadSuccess:function(){$('[data-toggle="popover"]').each(function(){var element=$(this);var id=element.attr("id");//获取按钮渲染的属性，传递给气泡操作块var fval=element.html();var txt=element.html();var hideT;element.popover({trigger:'manual',placement:'bottom',title:txt,html:'true',content:ContentMethod(id,fval),}).on("mouseenter",function(){var _this=this;//解决多个弹框出现的问题clearTimeout(hideT);if(txt!=$(".popover-title").text()){$(".popover-title").parent().css('display','none'); }$(this).popover("show");//$(".popover-title").parent().attr("id");$(this).siblings(".popover").on("mouseleave",function(){$(_this).popover('hide');});}).on("mouseleave",function(){var _this=this;hideT=setTimeout(function(){if(!$(".popover:hover").length){$(_this).popover('hide');}},100);});}); }
});//气泡操作块的展示	
function ContentMethod(id,fval){var tipCon='<div>';tipCon+='<p><a style="color:black;" href="javascript:void(0)" onClick="showFile(''+id+'',0)">在线预览</a></p><hr style="margin-top:0px;margin-bottom:2px;border-bottom:pink 1px dashed;" />';tipCon+='<p><a style="color:black;" href="javascript:void(0)" onClick="downloadFile('' +id+ '')">下载</a></p></div>'return tipCon;
}