gridview顯示圖片並實現點選圖片放大縮小
阿新 • • 發佈:2019-02-10
一、建立一個gridview控制元件,並新增列。
其中ImageField就是顯示圖片的列,屬性DataImagteUrlField繫結為圖片的路徑,也就是資料庫儲存圖片路徑的欄位名。
二、建立一個用來顯示大圖片的div 以及Img控制元件。以及css樣式、js。
Html
<div id="Show_img_Max" onclick="divClick()"> <div> <img src="" class="Show_imgStyle" /> </div> </div>
css樣式
* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #form1 > .divMain { margin: 0 auto; padding-top: 150px; width: 800px; height: 500px; text-align: center; } #Show_img_Max { position: absolute; top: 1px; display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } #Show_img_Max > div { margin: 100px auto; width: 550px; height: 350px; } #Show_img_Max .Show_imgStyle { width: 550px; height: 350px; }
js
function CellClick(ImgUrl) {
$(".Show_imgStyle").attr("src", ImgUrl);
$("#Show_img_Max").css("display", "block");
}
function divClick() {
$("#Show_img_Max").css("display", "none");
}
三、新增一個gridview行資料繫結後激發事件(RowDataBound),在該事件寫程式碼。
protected void grdview_test_RowDataBound(object sender, GridViewRowEventArgs e)
{
//判斷是否為資料行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//設定圖片的寬、高度
(e.Row.Cells[3].Controls[0] as Image).Width = 70;
(e.Row.Cells[3].Controls[0] as Image).Height = 50;
//獲取當前行的圖片路徑
string ImgUrl = (e.Row.Cells[3].Controls[0] as Image).ImageUrl;
//給帶圖片的單元格新增點選事件
e.Row.Cells[3].Attributes.Add("onclick", e.Row.Cells[3].ClientID.ToString()
+".checked=true;CellClick('" + ImgUrl+ "')");
}
}
四、資料方面就自己添加了。效果圖如下:
顯示:
點選圖片後:
然後點選其他地方或者圖片就恢復原狀。