在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控件这里就不多说了

  因为是在点击Link时将弹出窗体,所以在asp:LinkButton控件需要添加点击事件(OnClientClick='<%#"javascript:openCommentsDialog(\"" + SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string) + "\"); return false;" %>'),其中SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string)是参数

  1. <asp:TemplateField HeaderText="Impact on Product Type">
  2. <ItemTemplate>
  3. <asp:LinkButton ID="impactProductLinkButton" runat="server" Text='<%# Bind("ImpactOnProduct") %>'
  4. OnClientClick='<%# "javascript:openCommentsDialog(\"" + SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string) + "\"); return false;" %>'></asp:LinkButton>
  5. </ItemTemplate>
  6. </asp:TemplateField>

  

  2. 在客户端Javascript对象模型中的SP.UI.ModalDialog类提供了对话框框架的定义。

  其中urlStr变量用于存放详细页面的路径及传递参数到详细页面,如果传递参数的数据量比较大,请不要使用该方法,请参考下一篇文章弹窗效果(二)

  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; // 定向详细页面的URL
  6. options.height = 500; // 定义窗体的高度
  7. options.width = 500; // 定义窗体的高度
  8.  
  9. SP.UI.ModalDialog.showModalDialog(options);
  10. }

  3. 在详细页面中我们需要接收参数并通过参数绑定数据, 由于详细页面因个人需求不同,这里将不做任何讲解。

有些朋友会问如何将详细页面中指定的值返回到父页面呢?这一问题我们将在下一篇文章弹窗效果(三)中讲解.

SharePoint 2013 弹窗效果之URL打开方式(一)的更多相关文章

  1. SharePoint 2013 弹窗效果之本地HTML打开方式(二)

    上一篇我们主要讲述如何通过showModalDialog方法进行弹出窗体,同时弹出信息定义在新的页面(Application Page),使用 SP.UI.$create_DialogOptions( ...

  2. SharePoint 2013 页面访问,Url中间多一段"_layouts/15/start.aspx#"

    问题描述: 我想访问如下页面 http://Host/_layouts/15/ManageFeatures.aspx 点击以后页面地址没有错,但是中间多了一段“_layouts/15/start.as ...

  3. SharePoint 2013 页面访问,Url中间多一段&quot;_layouts/15/start.aspx#&quot;

    问题描述: 我想访问如下页面 http://Host/_layouts/15/ManageFeatures.aspx 点击以后页面地址没有错,但是中间多了一段"_layouts/15/sta ...

  4. SharePoint 2013开发入门探索(一)- 自定义列表

    在SharePoint 2013中创建自定义列表的方式有很多,在网站内容页面添加应用程序就可以创建(站点内容-〉 您的应用程序),也可以通过SharePoint Designer 2013创建,而本文 ...

  5. SharePoint 2013 工作流平台的选项不可用

    问题描述 当我想创建一个SharePoint 2013 工作流的时候,打开SharePoint 2013 Designer(一下简称SPD),发现没有SharePoint 2013 工作流的选项.原来 ...

  6. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 处理开发者需求

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 处理开发者需求         SharePoint本质上是一个平台.你 ...

  7. SharePoint 2013 入门教程

    以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...

  8. SharePoint 2013 入门教程--系列文章

    转:http://www.cnblogs.com/jianyus/p/3381415.html 以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这 ...

  9. SharePoint 2013 入门教程 [不断更新~]

    以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...

随机推荐

  1. 从奥鹏一个答案提取页面 看jquery知识点

     http://oldlearn.open.com.cn/OEMSExercise/HomeworkReview.aspx?HomeworkId=9c034488-0a3d-4b9d-a6cc-e42 ...

  2. json字符串、json对象、数组 三者之间的转换

    json字符串转化成json对象 // jquery的方法 var jsonObj = $.parseJSON(jsonStr) //js 的方法 var jsonObj = JSON.parse(j ...

  3. cocos2d-x创建精灵动画

    创建动画一般过程: 1.创建精灵框架缓存,并向其中添加相应的动画文件(plist),最后,通过动画集缓存生产动画 CCSpriteFrameCache *cache = CCSpriteFrameCa ...

  4. DirectShow VS2013 控制台下捕捉摄像头而且显示

    须要lib库文件 strmiids.lib,下载地址:http://download.csdn.net/detail/dopamy_busymonkey/8872687 放在解决方式中项目的根文件夹中 ...

  5. Kruskal算法模拟讲解

    Kruskal 算法是一个求最小生成树的算法,即求最小的开销等 算法可以这样,要求得最小生成树,那么n个节点只能包括n-1条边 所以我们应该转换为寻找这最短的n-1条边,因此,可以先对所有的 边进行从 ...

  6. eclipse 常见问题及解决

    1. Target runtime Apache Tomcat v6.0 is not defined.错误解决方法 原文:http://blog.csdn.net/xw13106209/articl ...

  7. 自己写的Dapper通用数据访问层

    using Microsoft.Practices.EnterpriseLibrary.Data; using Microsoft.Practices.EnterpriseLibrary.Data.O ...

  8. css 权威指南笔记( 五)结构和层叠之三种样式来源

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...

  9. Python数据类型(元组、列表、字符串、字典)

    元组tuple:不可修改的数据类型 ABC = ('a', 1, x, 'today') 列表list:可修改的数据类型 ABC = ['a', 1, x, 'today'] 字符串set: ABC ...

  10. mvc form

    当点击提交按钮后,想在Controll里取到Form里的数据. 必须在控件上设置name属性 例如<input type='text',name='userId'/>, 在controll ...