該寫(xiě)法是在easy UI框架下所用！
主要的功能就是點(diǎn)擊詳情時(shí)候跳出一個(gè)顯示框?qū)⒎?wù)器中的PDF文件顯示出來(lái).
后臺(tái)數(shù)據(jù)庫(kù)中存儲(chǔ)的是已經(jīng)上傳了的文件路徑！如果去掉<th>中的formatter:detail前端將
顯示只是文件路徑，例如：http://127.0.0.1:8080/PFSSmes/uploadFile/changeInfoPDF/bad_0001_20161001083020_20161013100118.pdf


詳細(xì)的操作代碼如下.

1-調(diào)用JS方法時(shí)候的寫(xiě)法！！！！！！
<th data-options="field:'detailFilePath',width:165,align:'center',formatter:detail">詳情</th>

2-點(diǎn)擊詳情時(shí)候跳出的顯示框！
<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方法詳細(xì)代碼
<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-主頁(yè)顯示的情況，

2-當(dāng)點(diǎn)擊單行的詳情時(shí)，將跳出顯示框。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。