數(shù)據(jù)庫(kù)中的圖片字段如何在報(bào)表中呈現(xiàn)-創(chuàng)新互聯(lián)

本篇文章為大家展示了數(shù)據(jù)庫(kù)中的圖片字段如何在報(bào)表中呈現(xiàn)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

為雨花等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及雨花網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、雨花網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

在 web 端我們查看一些數(shù)據(jù)時(shí)，為了方便用戶理解數(shù)據(jù)的計(jì)算方法，會(huì)在鼠標(biāo)指向格子的時(shí)候出現(xiàn)一些提示，鼠標(biāo)移開的時(shí)候提示就不顯示了，再比如說(shuō)，鼠標(biāo)指向頁(yè)面按鈕，出現(xiàn)按鈕功能的提示，這樣的效果在潤(rùn)乾中可以輕松實(shí)現(xiàn)，也有相應(yīng)的文檔介紹 鼠標(biāo)懸停出現(xiàn)提示信息怎么做 。

除了上面說(shuō)的那種靜態(tài)信息外，在潤(rùn)乾報(bào)表中也可以實(shí)現(xiàn)鼠標(biāo)指向顯示對(duì)應(yīng)的動(dòng)態(tài)數(shù)據(jù)，還可以實(shí)現(xiàn)鼠標(biāo)指向顯示圖片的效果哦！

這里以學(xué)生信息表為例，實(shí)現(xiàn)鼠標(biāo)指向不同人員的照片，可以在旁邊顯示出相應(yīng)的大圖。

具體實(shí)現(xiàn)方法

制作一張學(xué)生信息表

數(shù)據(jù)庫(kù)中存的人員基本信息是在一條記錄里，而我們常見的人員信息表是將一條記錄里的數(shù)據(jù)在不同行中顯示，這種報(bào)表相對(duì)于網(wǎng)格式報(bào)表來(lái)說(shuō)格式更加隨意，我們稱之為自由報(bào)表，關(guān)于如何實(shí)現(xiàn)自由格式報(bào)表可以參考
數(shù)據(jù)庫(kù)中的圖片字段怎么在報(bào)表中呈現(xiàn) （圖片字段呈現(xiàn)） 。

報(bào)表模板設(shè)計(jì)如下圖所示

增加要顯示的圖片的圖層

在報(bào)表中追加一列，將 J2~J6 合并單元格，并將合并后的 J2 單元格數(shù)據(jù)類型設(shè)置為 html, 單元格的內(nèi)容為：

="<div id='sjbb_hover'>
 <p>人員信息高清免冠證件照 </p>
 <img src='http://localhost:6868/demo/reportJsp/images/"+F3+".jpg' width=150px>
 </div>"

頁(yè)面中增加鼠標(biāo)懸停時(shí)圖層的樣式

在 showReport.jsp 中增加如下的樣式：

<style>
#sjbb_hover{    padding: 10px 10px 10px 10px;
    border-radius: 3px;
    box-shadow: 0px 0px 2px #ccc;
    background: #fff;
    color: #000;
    position: absolute;
    text-align: center;
    display: inline-block;
    left: 532px;
    top: 47px;}
</style>

頁(yè)面中增加圖層的顯示隱藏的 JS 方法

$("#sjbb_hover").hide();
function show()
{
   $("#sjbb_hover").show();
}
function hide()
{
    $("#sjbb_hover").hide();
}

選中 H2，設(shè)置 HTML 事件為 >

經(jīng)過(guò)以上設(shè)置我們就完成了鼠標(biāo)懸停顯示圖片的需求了。

瀏覽器中通過(guò) http://localhost:6868/demo/reportJsp/showReport.jsp?rpx= 學(xué)生信息表.rpx 就可以看到效果了。

翻頁(yè)查看另一人的信息時(shí)，鼠標(biāo)指向是對(duì)應(yīng)人員的照片。

通過(guò)這樣的設(shè)置，我們還可以實(shí)現(xiàn)鼠標(biāo)指向，顯示個(gè)二維碼，用戶可以通過(guò)手機(jī)掃碼二維碼，在手機(jī)上查看更多需要了解的信息。

上述內(nèi)容就是數(shù)據(jù)庫(kù)中的圖片字段如何在報(bào)表中呈現(xiàn)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

網(wǎng)站欄目：數(shù)據(jù)庫(kù)中的圖片字段如何在報(bào)表中呈現(xiàn)-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://muchs.cn/article44/pgiee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、App開發(fā)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)