該寫法是在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' οnclick='clickSettings(\""
+ detailFilePath + "\")'/></a>";
}
function clickSettings(detailFilePath) {
PDFObject.embed(detailFilePath, "#pdfFile");
$('#detailDlg').dialog('open');
}

</script>

效果如下：1-主頁顯示的情況，

2-當點擊單行的詳情時，將跳出顯示框。

總結

以上是生活随笔為你收集整理的前端点击图片将跳出显示框显示图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。