首页 > 代码库 > SharePoint 2013 弹窗效果
SharePoint 2013 弹窗效果
在SharePoint中想做一个弹出效果其实很简单，仅仅在js中使用SharePoint Modal Dialog, 以下做一个简单的例子：很多情况下我们会通过linkButton弹出一个详细页面，那么下面我们将以这样的场景作为例子。
场景： 在结果集里将鼠标停留在"Impact on Product Type" 列，并选中你所需要查看的信息，它将会弹出窗体并显示与impact on product type相关的信息
首先我们看一下最终的效果图 (这里我选中第二条数据，在"Impact on Product Type"列下点击65000Transaction Management Software)
接下来，我们将设计该弹出功能：
1. 在Web Part中添加SharePoint的SPGridView控件(你也可以直接使用ASP里的LinkButton控件)，在SPGridView里添加LinkButton控件，对于如何使用SPGridView控件这里就不多说了
1 <SharePoint:SPGridView ID="gv_stdSearchResult" runat="server" Width="100%" AutoGenerateColumns="false" 2 AllowPaging="true" ShowHeader="true" AllowSorting="False" PageSize="10" OnRowDataBound="gv_stdSearchResult_RowDataBound" 3 OnPageIndexChanging="gv_stdSearchResult_PageIndexChanging" ShowHeaderWhenEmpty="True" HeaderStyle-CssClass="ms-viewheadertr"> 4 <Columns> 5 <SharePoint:SPBoundField HeaderText="ID" DataField="ID" Visible="false"> 6 </SharePoint:SPBoundField> 7 <asp:TemplateField HeaderText="Std/Reg No."> 8 <ItemTemplate> 9 <asp:LinkButton ID="StdNumber" runat="server" Text=‘<%# Bind("Title") %>‘10 OnClientClick=‘<%# "javascript:openDetialPage(\"" + (Eval("ID")) + "\"); return false;" %>‘></asp:LinkButton>11 </ItemTemplate>12 </asp:TemplateField>13 <SharePoint:SPBoundField HeaderText="Std/Reg Title in Chinese" DataField="ChineseName" SortExpression="ChineseName">14 </SharePoint:SPBoundField>15 <SharePoint:SPBoundField HeaderText="Std/Reg Title in English" DataField="EnglishName" SortExpression="EnglishName">16 </SharePoint:SPBoundField>17 <asp:TemplateField HeaderText="Impact on Product Type">18 <ItemTemplate>19 <asp:LinkButton ID="impactProductLinkButton" runat="server" Text=‘<%# Bind("ImpactOnProduct") %>‘20 OnClientClick=‘<%# "javascript:openCommentsDialog(\"" + SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string) + "\"); return false;" %>‘></asp:LinkButton>21 </ItemTemplate>22 </asp:TemplateField>23 <SharePoint:SPBoundField HeaderText="Certification required" DataField="Cert" SortExpression="Cert">24 </SharePoint:SPBoundField>25 </Columns>26 </SharePoint:SPGridView>
因为是在点击Link时将弹出窗体，所以在asp:LinkButton控件需要添加点击事件(OnClientClick=‘<%#"javascript:openCommentsDialog(\"" + SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string) + "\"); return false;" %>‘），其中SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string)是参数
1 function openCommentsDialog(name) { 2 var options = SP.UI.$create_DialogOptions(); 3 var localUrl = window.location; 4 var urlStr = localUrl.protocol + "//" + localUrl.host + "/_layouts/15/ImpactOnProductTypeDetial.aspx?impactOnProductGuid=" + name; 5 options.url = urlStr; 6 options.height = 500; 7 options.width = 500; 8 9 SP.UI.ModalDialog.showModalDialog(options);10 }
以上是openCommentsDialog方法，用于创建窗体，其中SP.UI.$create_DialogOptions()是SharePoint中已经封装好的创建窗体，url表示转到我们的详细页面(这里使用的是Application page)，也可以定义窗体的高、宽。SP.UI.ModalDialog.showModalDialog(options)用于显示/打开该窗体。以下是详细页面(Application page)
1 %@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %> 2 <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %> 3 <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 4 <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 5 <%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 6 <%@ Import Namespace="Microsoft.SharePoint" %> 7 <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 8 9 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImpactOnProductTypeDetial.aspx.cs" Inherits="ProductRequestEventReceiver.Layouts.ImpactOnProductTypeDetial" DynamicMasterPageFile="~masterurl/default.master" %>10 11 <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">12 </asp:Content>13 14 <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">15 <div>16 <SharePoint:SPGridView ID="gv_impactOnProductDetial" runat="server" Width="100%" AutoGenerateColumns="false"17 AllowPaging="false" ShowHeader="true" AllowSorting="False" OnRowDataBound="gv_impactOnProductDetial_RowDataBound"18 ShowHeaderWhenEmpty="True">19 <Columns>20 <SharePoint:SPBoundField HeaderText="Proudct Guid" DataField="ProductGuid" Visible="false">21 </SharePoint:SPBoundField>22 <SharePoint:SPBoundField HeaderText="Product Type" DataField="ProductType" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="13px">23 </SharePoint:SPBoundField>24 <SharePoint:SPBoundField HeaderText="Product Name" DataField="ProductFullName" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="13px">25 </SharePoint:SPBoundField>26 </Columns>27 </SharePoint:SPGridView>28 </div>29 </asp:Content>30 31 <asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">32 Impact on Product Type33 </asp:Content>34 35 <asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">36 My Application Page37 </asp:Content>
SharePoint 2013 弹窗效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。