SharePoint菜单

分享于 

10分钟阅读

Web开发

  繁體
在 IE 中:

GridView menu IE

在Mozilla中:

GridView menu MZ

介绍

通常,在任何应用程序中,如果要编辑/delete 行,我们将在 GridView 中添加不同的列添加编辑/删除链接/按钮。 但是,我想做一些不同的事情。 我认为我们中的许多人看到了SharePoint列表样式 GridView,可以看到下拉菜单,同时单击 GridView的任何列。 在这篇文章中,我将展示一些类似的。

背景

我在CodeProject中看到了一个关于 GridView悬停菜单的文章。 我从示例代码开始,修改了/添加了一些技术。 我还搜索了Google如何在 GridView 控件中生成菜单。

使用代码

首先,我想简要介绍一下这种技术。 让我们先讨论文件后面的代码。 在文件后面的代码中,在 Page_Load 事件中,我将 GridView 绑定到。

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

数据源是带有列的DataTable: IdNameClassRollAddress。 我们可以在那里提供一些样本数据。 然后,在 gridViewExample_RowDataBound 事件中,我们将附加一些JavaScript方法,它的中包含 GridView 中列控件的某些事件。

GridView 中,我们有一个 tempaletfield,其中有三个东西: label标签- 列内容,它将在网格列的特定位置隐藏,然后显示在网格列中,然后在 grid grid中显示,在单击下拉列表时显示。 如果再次单击 icon,或者在菜单区域中移动 cursor,菜单将消失。 下面是 GridView 代码的一部分:

<%-- column 1 --%><asp:templatefieldheadertext="Name"><itemtemplate><tableclass="linktableover"style=""cellpadding="0"cellspacing="0"><tr><tdstyle="width:160px"><asp:labelrunat="server"id="lblName"Text='<%# Bind("Name")%>'/></td><td><asp:ImageID="gridPopup_img"style="border-width: 0px; visibility: hidden; vertical-align: middle;"runat="server"ImageUrl="~/img/dd.gif"/></td></tr></table> 
 <%-- pop up menu --%><divid="gridPopup"style="width:130px; position: absolute; z-index: 101; visibility: hidden;"runat="server"><tableclass="DropDropMenu"><tbody><tr><tdstyle="border-style: solid; border-width: 1px;"><table><tr><td><imgalt="EDIT"src="img/edit.gif"/></td><td><asp:linkbuttonid="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><imgalt="DELETE"src="img/delete.gif"/></td><td><asp:linkbuttonid="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><imgalt="SEARCH"src="img/search.gif"/></td><td><asp:linkbuttonid="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><imgalt="ATTACH"src="img/attach.gif"/></td><td><asp:linkbuttonid="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><ItemStyleWidth="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 imagestring menuShowOnImgClick = "menuShowOnImgClick(this,'" + popupMenu.ClientID + "')";
 gridCellImage.Attributes.Add("onclick", "javascript:" + menuShowOnImgClick);
 //show the image onmouseover of the columnstring showImg = "showImg(this,'" + gridCellImage.ClientID + "');";
 e.Row.Cells[0].Attributes.Add("onmouseover", "javascript:" + showImg);
 //hide img and menu onmouseout of the column and menustring 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 menustring showMenu = "showMenu(this);";
 popupMenu.Attributes.Add("onmouseover", "javascript:" + showMenu);
}

以下是已经使用的JavaScript函数:

//called on image clickfunction 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 overfunction showImg(event,imageId) { 
 var img = document.getElementById(imageId); //get the imageif(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 outfunction 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 overfunction 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 overfunction showMenu(event)
{
 flagDisplaymenu = 1;
}

运行该应用程序后,我们可以看到菜单显示在列值下面。 而且,每当我们单击任何菜单项时,gridViewExample_RowCommand 事件都会被触发。 在该事件中,我们可以通过使用命令参数来检测单击哪个菜单项- e.CommandArgumentGridView 数据源的of列。

结束语

就是这样。我在 Mozilla 3.0和 IE 6.0上测试了这个应用。 我希望这对你对. Try的帮助。修改。扩展和享受有帮助。


SHA  GRID  菜单  Gridview  分享  Sharepoint  
相关文章