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

来源：互联网发布：天津港数据编辑：程序博客网时间：2024/06/07 17:30

一、学习内容概述：

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

二、学习内容总结：

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 onload="init()" style="margin:0;"></body></html>

0 0