类似SharePoint的GridView菜单

引言

通常，在任何应用程序中，如果我们要编辑/删除一行，我们会在 GridView 中添加不同的列来添加编辑/删除链接/按钮。但我希望做一些不同的事情。我想我们很多人都见过 SharePoint 列表风格的 GridView，在那里我们可以点击 GridView 的任何特定列时看到一个下拉菜单。在这篇文章中，我将展示类似的东西。

背景

我在 CodeProject 上看到了一篇文章关于 GridView Hover Menu。我从该示例代码开始，并进行了一些修改/添加了一些技巧。我还搜索了 Google 关于如何在 GridView 控件中生成菜单的方法。

Using the Code

首先，我想简要解释一下这种技术。让我们首先讨论代码后置文件。在代码后置文件中，在 Page_Load 事件中，我绑定了 GridView。

gridViewExample.DataSource = getDataSource();
gridViewExample.DataBind();

数据源是一个包含列的 DataTable：Id、Name、Class、Roll 和 Address。我们可以在那里提供一些示例数据。然后在 gridViewExample_RowDataBound 事件中，我们将一些 JavaScript 方法附加到 GridView 中某一列的控件的一些事件上。

在 GridView 中，我们有一个 tempaletfield，其中包含三件事：一个标签 - 将显示列的内容，一个图像（类似于下拉图标） - 将首先隐藏，然后在网格特定列的 onmouseover 事件中显示，以及一个包含菜单的 Div - 它在加载时也将被隐藏，并在点击下拉图标时显示。如果再次点击图标，或者将光标从菜单区域移开，菜单将消失。以下是 GridView 代码的一部分

<%--  column 1   --%>

<asp:templatefield headertext="Name"  >
    <itemtemplate>
        
        <table class="linktableover" 
        style="" cellpadding="0" cellspacing="0" >
        <tr>
        <td style="width:160px"><asp:label runat="server" id="lblName" 
                      Text='<%# Bind("Name")%>'/></td>
        <td><asp:Image  ID="gridPopup_img" 
              style="border-width: 0px; visibility: hidden; vertical-align: middle;"
              runat="server" ImageUrl="~/img/dd.gif" /></td>
        </tr>
        </table>  

    <%--  pop up menu   --%>
    <div id="gridPopup" 
         style="width:130px; position: absolute; z-index: 101; visibility: hidden;" 
         runat="server">
    <table class="DropDropMenu" >
    <tbody><tr>
    <td style="border-style: solid; border-width: 1px; ">
    <table>
    <tr>
    <td><img alt="EDIT" src="img/edit.gif" /></td>
    <td><asp:linkbutton id="btnEdit" text="EDIT" runat="server" 
      onmouseover="window.status='';this.style.textDecoration = 'underline'; return true" 
      onmouseout="window.status='';this.style.textDecoration = 'none'; return true"
      commandargument='<%#Bind("Id")%>' commandname="Print" 
      causesvalidation="false"/></td>
    </tr>
    <tr>
    <td><img alt="DELETE" src="img/delete.gif" /></td>
      <td><asp:linkbutton id="btnDelete" text="DELETE" runat="server" 
        onmouseover="window.status='';this.style.textDecoration = 'underline'; return true" 
        onmouseout="window.status='';this.style.textDecoration = 'none'; return true"
        OnClientClick="return confirm('Are you sure you want to delete the student ?');"
        commandargument='<%#Bind("Id")%>' commandname="Email" 
        causesvalidation="false"/></td>
    </tr>
    <tr>
    <td><img alt="SEARCH" src="img/search.gif" /></td>
    <td><asp:linkbutton id="btnSearch" text="SEARCH INFO" runat="server" 
      onmouseover="window.status='';this.style.textDecoration = 'underline'; return true" 
      onmouseout="window.status='';this.style.textDecoration = 'none'; return true"
      commandargument='<%#Bind("Id")%>' commandname="Search" 
      causesvalidation="false"/></td>
    </tr>
    <tr>
    <td><img alt="ATTACH" src="img/attach.gif" /></td>
    <td><asp:linkbutton id="btnAttach" text="ATTACH FILE" runat="server" 
       onmouseover="window.status='';this.style.textDecoration = 'underline'; return true" 
       onmouseout="window.status='';this.style.textDecoration = 'none'; return true"
       commandargument='<%#Bind("Id")%>' commandname="Attach" 
       causesvalidation="false"/></td>
    </tr>
    </table>
     </td></tr>
     </tbody></table>   
    </div>
     <%-- end - pop up menu   --%>
    </itemtemplate>
    <ItemStyle Width="100px" ></ItemStyle>
</asp:templatefield>

从上面的代码中，我们可以看到有一些链接按钮作为菜单项，并且我们已经将 commandargument 与 Id 的值绑定在一起。

if (e.Row.RowType == DataControlRowType.DataRow)
{
    //get the controls from particular column
    Label lblName = (Label)e.Row.Cells[0].FindControl("lblName");
    HtmlGenericControl popupMenu = 
      (HtmlGenericControl)e.Row.Cells[0].FindControl("gridPopup");
    Image gridCellImage = (Image)e.Row.Cells[0].FindControl("gridPopup_img");

    //show the menu in onclick event of image
    string menuShowOnImgClick = "menuShowOnImgClick(this,'" + popupMenu.ClientID + "')";
    gridCellImage.Attributes.Add("onclick", "javascript:" + menuShowOnImgClick);

    //show the image onmouseover of the column
    string showImg = "showImg(this,'" + gridCellImage.ClientID + "');";
    e.Row.Cells[0].Attributes.Add("onmouseover", "javascript:" + showImg);

    //hide img and menu onmouseout of the column and menu
    string hideImgAndMenu = "hideImgAndMenu(this)";
    popupMenu.Attributes.Add("onmouseout", "javascript:" + hideImgAndMenu);
    e.Row.Cells[0].Attributes.Add("onmouseout", "javascript:" + hideImgAndMenu);
    
    //keep showing the menu onmouseover of the menu
    string showMenu = "showMenu(this);";
    popupMenu.Attributes.Add("onmouseover", "javascript:" + showMenu);
}

以下是使用的 JavaScript 函数

//called on image click
function menuShowOnImgClick(imge,menuDivId) {
    var menuDiv = document.getElementById(menuDivId);
    if(menuDiv)
    {
        if(objSel && objSel != menuDiv)
        {
            objSel.style.visibility='hidden';
            imageObjSel.style.visibility='hidden';  
            if(document.all)
                {
                    selectedTableCell.childNodes[0].border='2';
                    selectedTableCell.childNodes[0].bordercolor='black';
                }
                else
                {
                    selectedTableCell.childNodes[1].className='linktable';
                } 
        }
        if(menuDiv.style.visibility=='visible')
        {
            menuDiv.style.visibility='hidden';
        }
        else
        {
            menuDiv.style.visibility='visible'; 
            var iLen=0;
            {
                   MoveMenuToRight(imge,menuDiv,0);
                   //move the menu right ..exact under the img
            }
        }
    }
    flagDisplaymenu = 1;
    objSel = menuDiv;
}

//called on td mouse over
function showImg(event,imageId) { 
    var img = document.getElementById(imageId);     //get the image
    if(imageObjSel)
    {
        if(objSel) 
        {
            if(img != imageObjSel)
            objSel.style.visibility='hidden';
        }
        imageObjSel.style.visibility='hidden';
    }            
    if(img)  //if img is found
    {
        flagDisplaymenu = 1;                    //set flag to show menu
        img.style.visibility='visible';         //show the img
        imageObjSel = img;                      //set the global obj value
        selectedTableCell = event;              //get the table cell
        selectedTableCell.border='1';
        if(document.all)
        {
            selectedTableCell.childNodes[0].border='2';
            selectedTableCell.childNodes[0].bordercolor='black';
        }
        else
        {
            selectedTableCell.childNodes[1].className='linktable';
        }
    }
}

//called on menu mouse out , called on td mouse out
function hideImgAndMenu(event)
{
    
    flagDisplaymenu = 0;     //set flag to hide menu
    timerID = setTimeout('updateTimer()', 5000);
    if(document.all)
    {             
        selectedTableCell.childNodes[0].border='0';
        selectedTableCell.childNodes[0].bordercolor='white';
    }
    else
    {
        selectedTableCell.childNodes[1].className='linktableover';
    }
}

//called on menu item mouse over ,called on menu mouse over
function updateTimer()
{
   if(objSel && flagDisplaymenu == 0)
   {
      objSel.style.visibility='hidden';        //hide the menu div
      imageObjSel.style.visibility='hidden';   //hide the img
      selectedTableCell.border='1';//0 
   }
}

//called on menu item mouse over ,called on menu mouse over
function showMenu(event)
{
    flagDisplaymenu = 1;
}

运行应用程序后，我们可以看到菜单显示在列值下方。并且，每当我们点击任何菜单项时，都会触发 gridViewExample_RowCommand 事件。在该事件中，我们可以通过使用命令参数 - e.CommandArgument（这是我们 GridView 的数据源的 ID 列）来检测点击了哪一行的菜单项。

结论

就这样。我已经在 Mozilla 3.0 和 IE 6.0 上测试了这个应用程序。我希望这对您有所帮助。尝试一下，修改它，扩展它，并享受它。