您好,登錄后才能下訂單哦!
本篇文章為大家展示了數(shù)據(jù)庫中的圖片字段如何在報表中呈現(xiàn),內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
在 web 端我們查看一些數(shù)據(jù)時,為了方便用戶理解數(shù)據(jù)的計算方法,會在鼠標指向格子的時候出現(xiàn)一些提示,鼠標移開的時候提示就不顯示了,再比如說,鼠標指向頁面按鈕,出現(xiàn)按鈕功能的提示,這樣的效果在潤乾中可以輕松實現(xiàn),也有相應(yīng)的文檔介紹 鼠標懸停出現(xiàn)提示信息怎么做 。
除了上面說的那種靜態(tài)信息外,在潤乾報表中也可以實現(xiàn)鼠標指向顯示對應(yīng)的動態(tài)數(shù)據(jù),還可以實現(xiàn)鼠標指向顯示圖片的效果哦!
這里以學(xué)生信息表為例,實現(xiàn)鼠標指向不同人員的照片,可以在旁邊顯示出相應(yīng)的大圖。
數(shù)據(jù)庫中存的人員基本信息是在一條記錄里,而我們常見的人員信息表是將一條記錄里的數(shù)據(jù)在不同行中顯示,這種報表相對于網(wǎng)格式報表來說格式更加隨意,我們稱之為自由報表,關(guān)于如何實現(xiàn)自由格式報表可以參考
數(shù)據(jù)庫中的圖片字段怎么在報表中呈現(xiàn) (圖片字段呈現(xiàn)) 。
報表模板設(shè)計如下圖所示
在報表中追加一列,將 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>"
在 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>
$("#sjbb_hover").hide(); function show() { $("#sjbb_hover").show(); } function hide() { $("#sjbb_hover").hide(); }
選中 H2,設(shè)置 HTML 事件為 >
經(jīng)過以上設(shè)置我們就完成了鼠標懸停顯示圖片的需求了。
瀏覽器中通過 http://localhost:6868/demo/reportJsp/showReport.jsp?rpx= 學(xué)生信息表.rpx 就可以看到效果了。
翻頁查看另一人的信息時,鼠標指向是對應(yīng)人員的照片。
通過這樣的設(shè)置,我們還可以實現(xiàn)鼠標指向,顯示個二維碼,用戶可以通過手機掃碼二維碼,在手機上查看更多需要了解的信息。
上述內(nèi)容就是數(shù)據(jù)庫中的圖片字段如何在報表中呈現(xiàn),你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。