通过DIV显示GridView中每行的图片

最新推荐文章于 2021-06-03 05:42:24 发布

xuwenwu

最新推荐文章于 2021-06-03 05:42:24 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.NET专栏 JavaScript专栏文章标签： div asp server object string textbox

本文链接：https://blog.csdn.net/xuwenwu/article/details/1542314

ASP.NET专栏同时被 2 个专栏收录

102 篇文章

订阅专栏

JavaScript专栏

31 篇文章

订阅专栏

本文介绍了一个用于从SharePoint图片库中选择或上传图片的ASP.NET用户控件。该控件包括两个面板，一个用于展示图片库中的图片并允许选择，另一个用于上传新图片。通过ASP.NET的GridView和其他控件实现了图片的分页显示、全选功能及图片预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前台代码:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageControl.ascx.cs" Inherits="usercontrol_ImageControl" %>

<%@ Register Src="FolderTree.ascx" TagName="FolderTree" TagPrefix="uc2" %>

<%@ Register Src="DepartPageControl.ascx" TagName="DepartPageControl" TagPrefix="uc1" %>

//<![CDATA[

function CheckAll(oCheckbox)

{

var GridView2 = document.getElementById("<%=GridView1.ClientID %>");

for(i = 1;i < GridView2.rows.length; i++)

{

GridView2.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = oCheckbox.checked;

}

function takePostion(ln,dn)

{

var obj = document.getElementById(dn);

var tipDiv = obj; mouseX = event.x + document.body.scrollLeft; mouseY = event.y + document.documentElement.scrollTop;

with (tipDiv.style)

{

display='block'; left=parseInt(mouseX)+"px"; top=(parseInt(mouseY)+20)+"px";

position='absolute';

}

function hidden(ln,dn)

{

var obj = document.getElementById(dn);

with(obj.style)

{

display="none";

}

//]]>

</script>

<tr>

</td>

</tr>

<tr>

</td>

<asp:RadioButtonList ID="radbtnUpload" runat="server" AutoPostBack="True" OnSelectedIndexChanged="radbtnUpload_SelectedIndexChanged"

RepeatDirection="Horizontal">

<asp:ListItem Selected="True">从图片库中选图片</asp:ListItem>

<asp:ListItem>上传新图片</asp:ListItem>

</asp:RadioButtonList></td>

</tr>

<tr>

<asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"

ShowLines="True" Font-Size="9pt" ForeColor="#000000">

</asp:TreeView>

</td>

<asp:Panel ID="Panel1" runat="server" Width="100%">

<tr>

<tr>

<asp:GridView ID="GridView1" runat="server" DataKeyNames="序号" CssClass="table" AllowPaging="True"

OnRowDataBound="GridView1_RowDataBound" PageSize="5" AutoGenerateColumns="False"

Width="100%">

<asp:TemplateField>

</HeaderTemplate>

<asp:CheckBox ID="ItemCheckBox" name="R_Check" runat="server" Visible="False" />

<asp:LinkButton ID="lnkSelect" runat="server" CommandName="Select" OnCommand="lnkSelect_Command">选择</asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="图片">

<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("完整路径") %>'></asp:TextBox>

</EditItemTemplate>

<asp:Image ID="Image1" runat="server" Height="40px" ImageUrl='<%# Eval("完整路径") %>'

Width="35px" />

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="路径" HeaderText="图片说明" >

</asp:BoundField>

<asp:BoundField DataField="序号" HeaderText="序号" />

<asp:BoundField DataField="完整路径" HeaderText="完整路径" />

</Columns>

</asp:GridView>

</td>

</tr>

<tr>

<asp:LinkButton ID="lnkbtnFrist" runat="server" OnClick="lnkbtnFrist_Click">首页</asp:LinkButton>

<asp:LinkButton ID="lnkbtnPre" runat="server" OnClick="lnkbtnPre_Click">上一页</asp:LinkButton>

<asp:Label ID="lblCurrentPage" runat="server"></asp:Label>

<asp:LinkButton ID="lnkbtnNext" runat="server" OnClick="lnkbtnNext_Click">下一页</asp:LinkButton>

<asp:LinkButton ID="lnkbtnLast" runat="server" OnClick="lnkbtnLast_Click">尾页</asp:LinkButton>

跳转到第<asp:DropDownList ID="ddlCurrentPage" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlName_SelectedIndexChanged">

</asp:DropDownList>页</td>

</tr>

</table>

<asp:Button ID="btnOutPut" runat="server" Text=" 确定 " OnClick="btnOutPut_Click"

CssClass="button_skin" Visible="False" /></td>

</tr>

</table>

</asp:Panel>

<asp:Panel ID="Panel2" runat="server" Visible="False" Width="100%">

<tr>

<asp:Button ID="btnUpImage" runat="server" OnClick="btnUpImage_Click" Text=" 上传 "

CssClass="button_skin" /></td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

</center>

2.后台代码:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.IO;

using Microsoft.SharePoint;

using yesinda.yesindakms.sharepoint;

using yesinda.yesindakms.sharepoint.List;

public partial class usercontrol_ImageControl : System.Web.UI.UserControl

{

public string ReturnValue = String.Empty;

private SPSite site;

private SPWeb web;

private SPList list;

private SPListItemCollection items;

private string FolderPath = "/dept/gsb/DocLib4";

private string siteUrl = "/dept/gsb/";

public string SiteUrl

{

get { return this.siteUrl; }

set { siteUrl = value; }

}

private string listName = "图片";

public string ListName

{

get { return this.listName; }

set { listName = value; }

}

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

ViewState["path"] = FolderPath;

//GetFolder();

BindGrid();

site = ListLib.findParamSite(siteUrl, Context);

web = site.OpenWeb();

list = web.Lists[listName];

items = list.Items;

SPFolder root = list.RootFolder;

TreeNode rootNode = new TreeNode(listName, root.Url);

TreeView1.Nodes.Add(rootNode);

AddChild(root, rootNode);

}

创建数据源

绑定TreeView

public void BindGrid()

{

this.GridView1.DataKeyNames = new string[] { "序号" };

this.GridView1.DataSource = CreateDataSource(ViewState["path"].ToString());

this.GridView1.DataBind();

this.ddlCurrentPage.Items.Clear();

for (int i = 1; i <= this.GridView1.PageCount; i++)

{

this.ddlCurrentPage.Items.Add(i.ToString());

}

if (this.GridView1.PageIndex != 0)

{

this.ddlCurrentPage.SelectedIndex = this.GridView1.PageIndex;

}

protected void btnUpImage_Click(object sender, EventArgs e)

{

AddImage();

}

上传图片

//全选

protected void CheckAll(object sender, EventArgs e)

{

CheckBox cbx = (CheckBox)sender;

foreach (GridViewRow gvr in GridView1.Rows)

{

CheckBox ch = (CheckBox)gvr.FindControl("ItemCheckBox");

ch.Checked = cbx.Checked;

}

/// <summary>

/// 将图片库中的图片插入到文本中

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

protected void btnOutPut_Click(object sender, EventArgs e)

{

SPSite sps = yesinda.yesindakms.sharepoint.List.ListLib.findParamSite("/dept/gsb/", this.Context);

sps.AllowUnsafeUpdates = true;

SPWeb spw = sps.OpenWeb();

spw.AllowUnsafeUpdates = true;

SPList list = spw.Lists["图片"];

string ReturnString = String.Empty;

foreach (GridViewRow gvr in this.GridView1.Rows)

{

CheckBox ch = (CheckBox)gvr.FindControl("ItemCheckBox");

if (ch.Checked)

{

SPListItem listcon = list.Items.GetItemById(Convert.ToInt32(GridView1.DataKeys[gvr.RowIndex].Value.ToString()));

ReturnString += sps.Url + "/" + listcon.Url;

}

Response.Write("<script>window.returnValue='" + ReturnString + "';window.close();</script>");

}

protected void radbtnUpload_SelectedIndexChanged(object sender, EventArgs e)

{

if (this.radbtnUpload.SelectedIndex == 0)

{

this.Panel1.Visible = true;

this.Panel2.Visible = false;

}

else

{

this.Panel1.Visible = false;

this.Panel2.Visible = true;

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

e.Row.Cells[4].Attributes.Add("style", "display:none");

e.Row.Cells[3].Attributes.Add("style", "display:none");

//滑过GridView控件显示不同颜色

if (e.Row.RowType == DataControlRowType.DataRow)

{

//<a href="http://www.baidu.com" onmouseover="this.T_SHADOWWIDTH=4;this.T_TEMP=3000;this.T_STICKY=1;this.T_OFFSETX=-20;return escape('图片提示 <img src='test.jpg' width='60'> ')"> 显示图片提示</a>

//e.Row.Attributes.Add("onmouseover", "this.T_SHADOWWIDTH=4;this.T_TEMP=3000;this.T_STICKY=1;this.T_OFFSETX=-20;return escape('图片提示 <img src='test.jpg' width='60'> ')");

e.Row.Attributes.Add("onmouseover", "takePostion(this,'d');c=this.style.backgroundColor;this.style.backgroundColor='#f0ffff';javascript:document.getElementById('showmaximg').src='" + e.Row.Cells[4].Text + "'");

e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c;hidden(this,'d');");

}