SharePoint 2013 弹窗效果之URL打开方式(一)
来源:互联网 发布:毛妹100能量伤害数据 编辑:程序博客网 时间:2024/05/23 12:39
SharePoint 2013 弹窗效果之URL打开方式(一)
在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打开方式(一)
- android 打开 url 方式
- iOS10打开url方式
- js-url打开方式
- SharePoint 2013的100个新功能之内容管理(一)
- SharePoint 2013的100个新功能之搜索(一)
- SharePoint 2013的100个新功能之内容管理(一)
- sharepoint 2013 使用outlook 打开sharepoint 任务失败
- InfoPath与SharePoint之(一) InfoPath和SharePoint List
- Evolution of SharePoint 之(一)SharePoint在云中的革新
- SharePoint designer 2013 打开工作流报错
- sharepoint 2013 打开个人网站报错
- JDBC笔记之URL方式
- 打不开"打开方式"之解决办法
- sharepoint quick URL
- Python 通过URL打开图片的几种方式
- sharepoint 链接 打开新窗口
- sharepoint 2010 打开匿名
- final Map可以修改内容,final 常量不能修改
- mybatis的模糊查询
- spark查询elasticsearch
- 使用ORAPWD命令Oracle密码文件
- 在二叉查找树中插入节点
- SharePoint 2013 弹窗效果之URL打开方式(一)
- 博客地址已经搬家
- 粗浅看 java反射机制
- CUsparse ch2 使用cusparse应用程序编程接口(API)
- android service 全面详解
- 2016河南ACM省赛-A-表达式求值
- 使用ImageLoader加载网络图片时,如何获取加载进度,如何设置进度条
- LeetCode Remove Duplicates from Sorted List II
- jquery 获取 动态input等元素的id