前端点击图片将跳出显示框显示图片

来源：互联网发布：网络上赌博赢了5千万编辑：程序博客网时间：2024/05/21 09:12

该写法是在easy UI框架下所用！
主要的功能就是点击详情时候跳出一个显示框将服务器中的PDF文件显示出来.
后台数据库中存储的是已经上传了的文件路径！如果去掉<th>中的formatter:detail前端将
显示只是文件路径，例如：http://127.0.0.1:8080/PFSSmes/uploadFile/changeInfoPDF/bad_0001_20161001083020_20161013100118.pdf

详细的操作代码如下.

1-调用JS方法时候的写法！！！！！！
<th data-options="field:'detailFilePath',width:165,align:'center',formatter:detail">详情</th>

2-点击详情时候跳出的显示框！
<div id="detailDlg" closed="true" class="easyui-dialog"
data-options="iconCls:'icon-save',title: 'pdf详情',"
style="width: 800px; height: 600px; padding: 10px">
<div id='pdfFile' style="width: 100%; height: 100%;"></div>
</div>

3-JS方法详细代码
<script type="text/javascript">
function detail(detailFilePath) {
return "<a href='javascript:;'><img width='8px' src='../../static/images/icons_menu/detail.png' onclick='clickSettings(\""
+ detailFilePath + "\")'/></a>";
}
function clickSettings(detailFilePath) {
PDFObject.embed(detailFilePath, "#pdfFile");
$('#detailDlg').dialog('open');
}

</script>

效果如下：1-主页显示的情况，

2-当点击单行的详情时，将跳出显示框。

1 0