轻量级流程图控件GoJS示例连载（八）：DOM树

轻量级流程图控件GoJS DOM树示例

此示例显示此 页的DOM（Document Object Model即文档对象模型）显示为树。图中的每个节点都显示关于DOM中相应的HTML元素的信息。

当选择节点时，对应的HTML元素的背景颜色将更改为淡蓝色（如下图）。这个示例还使用了TreeExpanderButton，它允许父节点展开和折叠其子节点。按钮是在Buttons.js中定义的。带有id属性的元素会在括 中注明。

在页面中查看此示例页面的部分源代码，点击这里查看完整源代码。

 var names = {}; // hash to keep track of what names have been used  function init() {    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this    var $ = go.GraphObject.make;  // for conciseness in defining templates    myDiagram =      $(go.Diagram, "myDiagramDiv",        {          initialAutoScale: go.Diagram.UniformToFill,          // define the layout for the diagram          layout: $(go.TreeLayout, { nodeSpacing: 5, layerSpacing: 30 })        });    // Define a simple node template consisting of text followed by an expand/collapse button    myDiagram.nodeTemplate =      $(go.Node, "Horizontal",        { selectionChanged: nodeSelectionChanged },  // this event handler is defined below        $(go.Panel, "Auto",          $(go.Shape, { fill: "#1F4963", stroke: null }),          $(go.TextBlock,            { font: "bold 13px Helvetica, bold Arial, sans-serif",              stroke: "white", margin: 3 },            new go.Binding("text", "key"))        ),        $("TreeExpanderButton")      );    // Define a trivial link template with no arrowhead.    myDiagram.linkTemplate =      $(go.Link,        { selectable: false },        $(go.Shape));  // the link shape    // create the model for the DOM tree    myDiagram.model =      $(go.TreeModel, {        isReadOnly: true,  // don't allow the user to delete or copy nodes        // build up the tree in an Array of node data        nodeDataArray: traverseDom(document.activeElement)      });  }  // Walk the DOM, starting at document, and return an Array of node data objects representing the DOM tree  // Typical usage: traverseDom(document.activeElement)  // The second and third arguments are internal, used when recursing through the DOM  function traverseDom(node, parentName, dataArray) {    if (parentName === undefined) parentName = null;    if (dataArray === undefined) dataArray = [];    // skip everything but HTML Elements    if (!(node instanceof Element)) return;    // Ignore the navigation menus    if (node.id === "navindex" || node.id === "navtop") return;    // add this node to the nodeDataArray    var name = getName(node);    var data = { key: name, name: name };    dataArray.push(data);    // add a link to its parent    if (parentName !== null) {      data.parent = parentName;    }    // find all children    var l = node.childNodes.length;    for (var i = 0; i < l; i++) {      traverseDom(node.childNodes[i], name, dataArray);    }    return dataArray;  }  // Give every node a unique name  function getName(node) {    var n = node.nodeName;    if (node.id) n = n + " (" + node.id + ")";    var namenum = n;  // make sure the name is unique    var i = 1;    while (names[namenum] !== undefined) {      namenum = n + i;      i++;    }    names[namenum] = node;    return namenum;  }  // When a Node is selected, highlight the corresponding HTML element.  function nodeSelectionChanged(node) {    if (node.isSelected) {      names[node.data.name].style.backgroundColor = "lightblue";    } else {      names[node.data.name].style.backgroundColor = "";    }  }

在GitHub上查看此示例页面的源代码

想查看在线操作示例，点击此处。

想要购买GoJS正版授权，或者获取更多该产品相关信息的朋友可以点击” 咨询在线客服 “~

标签：JavaScript HTML5图表图表控件流程图