TWaver HTML5学习笔记 —— 通过图层方式控制元素是否显示

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010077237/article/details/22004045

一、学习内容概述:

     学习如何在拓扑图中,通过图层方式控制元素是否显示。

二、学习内容总结:

1、添加图层:
				// 创建各图层
				var layerBox = box.getLayerBox();
				var nodeLayer = new twaver.Layer("Node");
				nodeLayer.setName("Node");
				layerBox.add(nodeLayer);
				var linkLayer = new twaver.Layer("Link");
				linkLayer.setName("Link");
				layerBox.add(linkLayer);


				var node = new twaver.Node();
				node.setName("ne1");
				node.setLocation(80, 80);
				node.setImage("route");
				node.setIcon("route_icon");
				node.setLayerId(nodeLayer.getId());
				box.add(node);

2、设置默认图层不可见:系统会提供一个默认的空白图层,如果不处理的话,表格会出来一个空白行。

                // 设置默认图层不可见
				var visibleFunction = function(layer) {
					return layer != layerBox.getDefaultLayer();
				};
				table.setVisibleFunction(visibleFunction);

三、验证代码运行效果截图:
      

四、验证代码:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>拓扑元素是否可见</title>
		<script type="text/javascript" src="./js/twaver.js"></script>
		<script type="text/javascript" src="./js/topo.js"></script>
		<script type="text/javascript">
			function init() {
				// 添加网元
				var box = new twaver.ElementBox();
				// 创建拓扑图
				var network = new twaver.network.Network(box);

				// 创建各图层
				var layerBox = box.getLayerBox();
				var nodeLayer = new twaver.Layer("Node");
				nodeLayer.setName("Node");
				layerBox.add(nodeLayer);
				var linkLayer = new twaver.Layer("Link");
				linkLayer.setName("Link");
				layerBox.add(linkLayer);

				// 注册图片
				topo.Util.registerImage("./images/ne/route.png");
				topo.Util.registerImage("./images/ne/route_icon.png");
				var node = new twaver.Node();
				node.setName("ne1");
				node.setLocation(80, 80);
				node.setImage("route");
				node.setIcon("route_icon");
				node.setLayerId(nodeLayer.getId());
				box.add(node);
				var node2 = new twaver.Node();
				node2.setName("ne2");
				node2.setLocation(200, 230);
				node2.setImage("route");
				node2.setIcon("route_icon");
				node2.setLayerId(nodeLayer.getId());
				box.add(node2);
				var link = new twaver.Link(node, node2);
				link.setName("ne1 -- ne2");
				link.setToolTip("<b> ne1 -- ne2</b>");
				link.setLayerId(linkLayer.getId());
				box.add(link);

				// 创建网元树
				var tree = new twaver.controls.Tree(box);
				tree.setCheckMode('descendantAncestor');
				// 设置在网元树中只显示节点
				tree.setVisibleFunction(function(element) {
					return element instanceof twaver.Node;
				});
				// 创建表格
				var table = new twaver.controls.Table(layerBox);
				table.setEditable(true);
				var tablePane = new twaver.controls.TablePane(table);
				topo.Util.createColumn(table, 'Layer Name', 'name', 'accessor');
				topo.Util.createColumn(table, 'Visible', 'visible', 'accessor', 'boolean', true);
                                // 设置默认图层不可见
				var visibleFunction = function(layer) {
					return layer != layerBox.getDefaultLayer();
				};
				table.setVisibleFunction(visibleFunction);
				// 拓扑各视图布局
				var rightSplit = new twaver.controls.SplitPane(network, tablePane, 'vertical', 0.7);
				var mainSplitPane = new twaver.controls.SplitPane(tree, rightSplit, 'horizontal', 0.3);
				var networkDom = mainSplitPane.getView();
				networkDom.style.width = "100%";
				networkDom.style.height = "100%";
				document.body.appendChild(networkDom);
				network.getView().style.backgroundColor = "#f3f3f3";
				network.getView().style.cursor = "hand";
				window.onresize = function() {
					mainSplitPane.invalidate();
				};
			}
		</script>
	</head>

	<body οnlοad="init()" style="margin:0;">

	</body>
</html>


展开阅读全文

没有更多推荐了,返回首页