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

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" %>

<script type="text/javascript">...
  //<![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>

<base target="_self" />
<center>
    &nbsp;<table style="width: 66%">
        <tr>
            <td style="height: 60px; text-align: center">
            </td>
            <td style="height: 60px; text-align: center">
                <strong><span style="font-size: 14pt">&nbsp;插入图片</span></strong></td>
        </tr>
        <tr>
            <td style="height: 60px; text-align: center">
            </td>
            <td style="height: 60px; text-align: center">
                <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>
            <td rowspan="1" style="vertical-align: top; text-align: left">
                <asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"
                                    ShowLines="True" Font-Size="9pt" ForeColor="#000000">
                    <SelectedNodeStyle ForeColor="Red" />
                </asp:TreeView>
            </td>
            <td style="text-align: center">
                <asp:Panel ID="Panel1" runat="server" Width="100%">
                    <table style="width: 100%">
                        <tr>
                            <td colspan="3" style="text-align: center">
                                <table width="100%">
                                    <tr>
                                        <td colspan="3" style="height: 21px; text-align: left">
                                            <asp:GridView ID="GridView1" runat="server" DataKeyNames="序号" CssClass="table" AllowPaging="True"
                                                OnRowDataBound="GridView1_RowDataBound" PageSize="5" AutoGenerateColumns="False"
                                                Width="100%">
                                                <Columns>
                                                    <asp:TemplateField>
                                                        <HeaderTemplate>
                                                            <input id="Checkbox2" runat="server" onclick="CheckAll(this)" type="checkbox" visible="false" />
                                                        </HeaderTemplate>
                                                        <ItemTemplate>
                                                            <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="图片">
                                                        <EditItemTemplate>
                                                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("完整路径") %>'></asp:TextBox>
                                                        </EditItemTemplate>
                                                        <ItemTemplate>
                                                            <asp:Image ID="Image1" runat="server" Height="40px" ImageUrl='<%# Eval("完整路径") %>'
                                                                Width="35px" />
                                                        </ItemTemplate>
                                                        <ItemStyle HorizontalAlign="Center" Width="45px" />
                                                    </asp:TemplateField>
                                                    <asp:BoundField DataField="路径" HeaderText="图片说明" >
                                                    </asp:BoundField>
                                                    <asp:BoundField DataField="序号" HeaderText="序号" />
                                                    <asp:BoundField DataField="完整路径" HeaderText="完整路径" />
                                                </Columns>
                                                <PagerSettings Visible="False" />
                                            </asp:GridView>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" style="height: 21px; text-align: right">
                                            &nbsp;
                                            <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%">
                    <table style="width: 100%">
                        <tr>
                            <td colspan="3" style="text-align: center">
                                <input id="File1" type="file" runat="server" class="button_skin" />
                                <asp:Button ID="btnUpImage" runat="server" OnClick="btnUpImage_Click" Text=" 上 传 "
                                    CssClass="button_skin" /></td>
                        </tr>
                    </table>
                </asp:Panel>
            </td>
        </tr>
    </table>
</center>
<script src="wz_tooltip.js" type="text/javascript"></script>
<div id='d' style='display:none; padding:3px; border-color:#0066ff; border-style:dashed; border-width:1px;" align=left'><img id="showmaximg" src='' alt="图片" /></div>
<!--<div id='d' style='display:none;OVERFLOW: auto; WIDTH: 260px; HEIGHT: 300px' align="left"><img id="showmaximg" src='' /></div>-->

 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);
        }
    }

    创建数据源#region  创建数据源
    /**//// <summary>
    /// 创建数据源
    /// </summary>
    /// <returns></returns>
    ICollection CreateDataSource(string folderpath)
    ...{
        DataTable dt = new DataTable("mytable");  //创建一个名为mytable的DataTable对象形
        DataColumn dc = new DataColumn();         //创建一个列对象
        dc.DataType = System.Type.GetType("System.Int32");  //指定该列的数据类型
        dc.AutoIncrement = true;              //该列为自动增涨列
        dc.AutoIncrementSeed = 1;          //初始值
        dc.AutoIncrementStep = 2;          //增量
        dc.Caption = "id";                     //设置列的标题
        dc.ColumnName = "序号";       //设置 列集合对象中的列的名称,datagrid中显示该列名.
        dt.Columns.Add(dc);              //将该列对象加入到表mytable的列集合中
        //普通列
        DataColumn dc1 = new DataColumn();
        dc1.DataType = System.Type.GetType("System.String");
        dc1.AllowDBNull = false;
        dc1.Caption = "path";
        dc1.ColumnName = "路径";
        dt.Columns.Add(dc1);

        DataColumn dc2 = new DataColumn();
        dc2.DataType = System.Type.GetType("System.String");
        dc2.AllowDBNull = false;
        dc2.Caption = "path";
        dc2.ColumnName = "完整路径";
        dc2.DefaultValue = 25;
        dt.Columns.Add(dc2);

        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["图片"];
        SPFolder folder = list.RootFolder;

        SPFolder f = spw.GetFolder(folderpath);

        foreach (SPFile file in f.Files)
        ...{
            if (dt != null)
            ...{
                DataRow dr = dt.NewRow();
                dr[0] = file.Item.ID;
                dr[1] = file.Name;
                dr[2] = "http://" + sps.HostName + file.ServerRelativeUrl;
                dt.Rows.Add(dr);
            }
        }
        DataView dv = new DataView(dt);
        return dv;
    }

    #endregion

    绑定TreeView#region  绑定TreeView

    private void AddChild(SPFolder parentFolder, TreeNode parentNode)
    ...{
        if (parentFolder.SubFolders.Count == 0)
            return;
        foreach (SPFolder f in parentFolder.SubFolders)
        ...{
            if (f.Name != "Forms" && f.Name.IndexOf("_") != 0)
            ...{
                TreeNode child = new TreeNode(f.Name, f.ServerRelativeUrl);
                parentNode.ChildNodes.Add(child);
                AddChild(f, child);
            }
        }
    }

    protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
    ...{
        ViewState["path"] = this.TreeView1.SelectedNode.Value;
        BindGrid();
    }

    #endregion


    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();
    }

    上传图片#region  上传图片
    //保存图片路径
    public static string ImageUrl = String.Empty;

    /**//// <summary>
    /// 上传图片到图片库
    /// </summary>
    public void AddImage()
    ...{
        if (File1.Value != "")
        ...{
            //上传附件添加到文档库，并返回ID，赋给model.Mattachment
            string filename = File1.PostedFile.FileName.Substring(File1.PostedFile.FileName.LastIndexOf("/") + 1);
            Stream filedataStream = File1.PostedFile.InputStream;
            int dataLen = File1.PostedFile.ContentLength;
            string fileType = File1.PostedFile.ContentType;
            byte[] fileData = new byte[dataLen];
            filedataStream.Read(fileData, 0, dataLen);

            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["图片"];
            SPFolder folder = list.RootFolder;
            SPFolderCollection folder2 = list.RootFolder.SubFolders;

            foreach (SPFolder folder3 in list.RootFolder.SubFolders)
            ...{
                if (folder3.Name == "所有图片")
                ...{
                    bool ex = false;
                    if (folder.Exists)
                    ...{
                        try
                        ...{
                            ex = folder3.Files[filename].Exists;
                            Response.Write("<script language="javascript">alert('已有相同名称的文件存在');</script>");
                            return;
                        }
                        catch
                        ...{
                            folder3.Files.Add(filename, fileData, true);
                            ImageUrl = "http://" + sps.HostName + folder3.ServerRelativeUrl + "/" + filename;
                        }
                    }
                }
            }

            Response.Write("<script>window.returnValue='" + ImageUrl + "';window.close();</script>");
        }
    }
    #endregion

    //全选
    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", "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');");
        }

        this.lblCurrentPage.Text = string.Format("当前第{0}页/总共{1}页", this.GridView1.PageIndex + 1, this.GridView1.PageCount);
    }
    protected void lnkbtnFrist_Click(object sender, EventArgs e)
    ...{
        //显示首页
        this.GridView1.PageIndex = 0;
        BindGrid();
    }
    protected void lnkbtnPre_Click(object sender, EventArgs e)
    ...{
        //显示上一页
        if (this.GridView1.PageIndex > 0)
        ...{
            this.GridView1.PageIndex = this.GridView1.PageIndex - 1;
            BindGrid();
        }
    }
    protected void lnkbtnNext_Click(object sender, EventArgs e)
    ...{
        //显示下一页
        if (this.GridView1.PageIndex < this.GridView1.PageCount)
        ...{
            this.GridView1.PageIndex = this.GridView1.PageIndex + 1;
            BindGrid();
        }
    }
    protected void lnkbtnLast_Click(object sender, EventArgs e)
    ...{
        //显示最后一页
        this.GridView1.PageIndex = this.GridView1.PageCount;
        BindGrid();
    }
    protected void ddlName_SelectedIndexChanged(object sender, EventArgs e)
    ...{
        //选择指定页显示
        this.GridView1.PageIndex = this.ddlCurrentPage.SelectedIndex;
        BindGrid();
    }
    protected void lnkSelect_Command(object sender, CommandEventArgs e)
    ...{
        LinkButton lb = (LinkButton)sender;
        DataControlFieldCell dcf = (DataControlFieldCell)lb.Parent;
        GridViewRow gvr = (GridViewRow)dcf.Parent;
        GridView1.SelectedIndex = gvr.RowIndex;

        Response.Write("<script>window.returnValue='" + gvr.Cells[3].Text + "';window.close();</script>");
    }
}