在SharePoint 2013中使用JSLink + Callout 展示信息(2)
来源:互联网 发布:无标度网络的度分布 编辑:程序博客网 时间:2024/06/11 23:42
上一篇博客在SharePoint 2013中使用JSLink + Callout 展示信息(1)中介绍了JSLink的简单用法,这篇博客继续结合Callout实现一个可以展示信息的自定义field。
上一篇文章中我们已经自定义了一个field,这里需要修改的就是flyscript.js文件,我们将向这个文件中添加callout功能(对于callout功能的介绍请参见SharePoint 2013中创建并使用Callout)。当用户点击field,弹出callout框来展示信息:
首先修改flyscript.js文件中的GetFlyingCallout方法,添加一个感叹号图标,并返回一个div元素:
function GetFlyingCallout(ctx) { var flyValue = ctx.CurrentItem.fly; //STSHTMLEncode needed var divId = "CalloutDiv" + ctx.CurrentItem.ID; return "<div id='" + divId + "' style=\"cursor: pointer;\" onmouseenter=\"InitCallout('" + divId + "','" + flyValue + "');\"> <span id=\"ms-pageDescriptionImage\"> " + flyValue + "</span></div>";}与上一篇文章有所不同,这里返回了一个div元素,并且为div元素指定了id,绑定了一个事件onmouseenter,当鼠标进入div区域时,将执行InitCallout方法,将callout弹出框附加到div上,InitCallout方法的代码:
function InitCallout(divId, param) { SP.SOD.executeFunc('callout.js', 'LoadCallOut', function () { console.log('load callout.js') }); SP.SOD.executeOrDelayUntilScriptLoaded(function () { AddCallout(divId, param); }, 'callout.js');}因为callout的使用依赖于callout.js这个SharePoint提供的文件,所以InitCallout方法首先确保callout.js已经加载,方法中使用了一个技巧,使用SP.SOD.executeFunc调用一个临时的方法,这个方法仅仅向浏览器的console中输出“load callout.js”信息。这样可以加载callout.js文件,然后使用SP.SOD,.executeOrDelayUntilScriptLoaded方法来调用AddCallout方法,这个方法最终向div绑定一个callout弹出框:
function AddCallout(divId, param) { var calloutElement = document.getElementById(divId); var calloutOptions = new CalloutOptions(); calloutOptions.ID = 'Callout_' + divId; calloutOptions.launchPoint = calloutElement; calloutOptions.beakOrientation = 'leftRight'; calloutOptions.content = 'This is Callout Test Description'; calloutOptions.title = 'This is Callout Test Title: ' + param; CalloutManager.createNewIfNecessary(calloutOptions);}这里的divId就是GetFlyingCallout方法返回的div元素的id,param参数可以传入数据,这里是自定义field的值,你可以根据需要传入不同的值。
因为每次鼠标进入div元素的区域都要执行这个方法,因此使用createNewIfNecessary方法而不是createNew方法来绑定callout,createNewIfNecessary方法会判断div元素是否已经绑定callout,如果已经绑定就不会再次绑定了。
重新部署之后,添加一个item,就会看到图中的效果了。
在实际环境中,可能根据不同的需要,获取不同的数据展示出来,例如展示图表,甚至展示其他列表中的信息都可以。
0 0
- 在SharePoint 2013中使用JSLink + Callout 展示信息(2)
- 在SharePoint 2013中使用JSLink + Callout 展示信息(1)
- 在SharePoint 2013中创建并使用Callout
- SharePoint 2013 中使用JSLink 来改变列表中某个字段或view(视图)的显示方式
- SharePoint 2013 字段属性之JSLink
- Sharepoint JSLink MultiString
- 在SharePoint中使用EventHandler。
- 在SharePoint中使用LINQ
- SharePoint中使用Visio Service展示业务数据
- JSLink文件中使用field的自定义属性
- 【ArcGIS for Android】使用自定义Callout显示地图信息
- SharePoint JS Link 之( 三)如何设置JSLink的引用
- SharePoint JS Link 之(四)JSlink常见例子和代码下载
- SharePoint JS Link 之(五)关于JSLink的一些FAQ
- sharepoint JSLink 改变列表字体颜色
- Sharepoint 2013 如何使用 Metadata 及效果展示
- 在SharePoint 2013 中使用UpdatePanel控件进行局部刷新
- 在 SharePoint 2013中使用 RelatedItems 列(Site column)
- flume-ng+Kafka+Storm+HDFS 实时系统搭建
- 如何移植DEDE网站?WIN2WIN.
- Hadoop2.2.0 HA + Jdk1.8.0 + Zookeeper3.4.5 + Hbase0.98 集群搭建详细过程(服务器集群)
- 高质量C/C++编程指南 阅读笔记(二)内存管理
- 局部对象
- 在SharePoint 2013中使用JSLink + Callout 展示信息(2)
- 在SharePoint 2013中创建并使用Callout
- 重载函数
- Python 正则表达式验证邮政信箱标识
- 线程同步之CyclicBarrier使用示例
- Python 分析Twitter用户喜爱的推文
- 今日作息及食谱(8.5)
- 黑马程序员---温习面向对象知识点总结
- 【翻译自mos文章】在oracle db 11gR2版本中启用 Oracle NUMA 支持