SharePoint Viso service 可以在线显示Viso的网页版文件(.vdw),并提供一套API对其操作http://msdn.microsoft.com/en-us/library/ff394593.aspx。
本文讲述SharePoint 2013/2010 点击 Viso web part中的节点相同页面的IFrame显示节点的超连接指向的页面。
1. 创建一个Viso文件,向其中添加若干节点,并给节点添加超连接
2. 将该Viso文件保存为VisoJS.vdw并上传至SharePoint 网站的文档库中
3. 新建一个页面,向其中插入Viso access web part,并设置要显示的vdw路径
4. 添加嵌入(Embed)Javascript 代码
插入代码如下(注意替换WebPartWPQ2为对应的Viso web part的ID):
<IFrame id="visoTestFrame" ></IFrame>
<script type="text/javascript" >
// 注册Viso/Execel applation service web part 加载事件
Sys.Application.add_load(onApplicationLoad);
// Viso webpart 的ID,可通过查看网页源代码或F12找到
var webPartId = "WebPartWPQ2";
var vwaControl;
var currentShape;
// 处理Viso/Execel applation service web part 加载事件
function onApplicationLoad() {
try
{
vwaControl = new Vwa.VwaControl(webPartId);
// 注册绘画完成事件
vwaControl.addHandler("diagramcomplete", onDiagramComplete);
}
catch (err) {
alert("onApplicationLoad\n" + err);
}
}
// 处理Viso绘图完成事件
function onDiagramComplete() {
try
{
// 注册当前选中的Shape发生变化事件
vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);
// 注册鼠标离开图形的事件
vwaControl.addHandler("shapemouseleave", onMouseLeaveShape);
// 注册鼠标进入图形的事件
vwaControl.addHandler("shapemouseenter", onMouseEnterShape);
}
catch (err) {
alert("onDiagramComplete\n" + err);
}
}
// 处理当前选中的Shape发生变化
function onShapeSelectionChanged(sender, args) {
// 取当前选中的图形
var shape = GetShapeById(args);
// 取图形上附加的超链接
var links = shape.getHyperlinks();
// 取第一个超链接并将visoTestFrame的 source url设置为该超链接所指向的地址
if (links.length >= 1) {
var visoTestFrame = $("#visoTestFrame")[0];
if (visoTestFrame) {
visoTestFrame.src = links[0].value;
visoTestFrame.width = 600;
visoTestFrame.height = 800;
}
}
// 可以给图形添加Highlit的颜色(可使用removeHighlight移除),但是如果完全覆盖了图形,则图形不能响应所有鼠标事件(select, mouse enter, mouse leave)
// shape.addHighlight(30, "#FF0000");
}
// 处理鼠标进入事件
function onMouseEnterShape(sender, args) {
currentShape = GetShapeById(args);
console.log("onMouseEnterShape, ID:" + args);
}
// 处理鼠标离开事件
function onMouseLeaveShape(sender, args) {
currentShape = null;
console.log("onMouseLeaveShape, ID:" + args);
}
// 添加覆盖层,缺点是添加完Overlay后,该图形就不能相应选中事件了, 可使用removeOverlay移除
function AddOverlay(vwaShape, color) {
if (!color) color = "#88FF0000";
vwaShape.addOverlay(
"Overlay",
"<Rectangle Height=\"" + vwaShape.getBounds().height + "\"" +
" Width=\"" + vwaShape.getBounds().width + "\"" +
" Stroke=\"Black\" StrokeThickness=\"1\" Fill=\"" + color + "\"" +
" RadiusX=\"0.0\" RadiusY=\"0.0\"\/>",
1,
1,
vwaShape.getBounds().width,
vwaShape.getBounds().height);
}
// 根据图形的id取图形
function GetShapeById(id) {
// 取得当前处于活动状态的Viso页面
var vwaPage = vwaControl.getActivePage();
// 取得该页面上的所有图形,包括箭头
var vwaShapes = vwaPage.getShapes();
// 根据图形的id取图形
var vwaShape = vwaShapes.getItemById(id);
return vwaShape;
}
</script>