123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <!DOCTYPE html>
- <html>
- <!--
- Copyright 2010 The Closure Library Authors. All Rights Reserved.
- Use of this source code is governed by the Apache License, Version 2.0.
- See the COPYING file for details.
- -->
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>goog.ui.tree.TreeControl</title>
- <script src="../../base.js"></script>
- <script>
- goog.require('goog.debug.DivConsole');
- goog.require('goog.debug.Trace');
- goog.require('goog.dom');
- goog.require('goog.ui.tree.TreeControl');
- </script>
- <script src="testdata.js"></script>
- <link rel="stylesheet" href="../css/demo.css">
- <link rel="stylesheet" href="../../css/tree.css">
- <style>
- #div-console {
- position: absolute;
- right: 10px;
- top: 10px;
- }
- </style>
- </head>
- <body>
- <h1>goog.ui.tree.TreeControl</h1>
- <div id="div-console"></div>
- <p><button onclick="toggleNonCollapseNode()">Toggle non collapsible</button>
- <button onclick="tree.setShowExpandIcons(!tree.getShowExpandIcons())">
- Toggle Expand Icons
- </button>
- <button onclick="tree.setShowLines(!tree.getShowLines())">
- Toggle Show Lines
- </button>
- <button onclick="tree.setShowRootLines(!tree.getShowRootLines())">
- Toggle Show Root Lines
- </button>
- <button onclick="tree.setShowRootNode(!tree.getShowRootNode())">
- Toggle Show Root Node
- </button>
- <p><button onclick="cut()">Cut</button>
- <button onclick="paste()">Paste</button>
- <div id="treeContainer" style="width:400px"></div>
- <script>
- var $ = goog.dom.getElement;
- var tree, clipboardNode;
- var divConsole = new goog.debug.DivConsole($('div-console'));
- divConsole.setCapturing(true);
- var logger = goog.debug.LogManager.getRoot();
- function makeTree() {
- goog.debug.Trace.initCurrentTrace();
- var tracerId = goog.debug.Trace.startTracer('makeTree');
- var treeConfig = goog.ui.tree.TreeControl.defaultConfig;
- treeConfig['cleardotPath'] = '../../images/tree/cleardot.gif';
- tree = new goog.ui.tree.TreeControl('root', treeConfig);
- createTreeFromTestData(tree, testData);
- tree.render($('treeContainer'));
- var elapsed = goog.debug.Trace.stopTracer(tracerId);
- goog.log.info(logger, 'Trace:\n' + goog.debug.Trace.getFormattedTrace());
- }
- function createTreeFromTestData(node, data) {
- node.setText(data[0]);
- if (data.length > 1) {
- var children = data[1];
- var childNotCollapsible = 3; // Hard coded to reduce randomness.
- for (var i = 0; i < children.length; i++) {
- var child = children[i];
- var childNode = node.getTree().createNode('');
- node.add(childNode);
- createTreeFromTestData(childNode, child);
- if (i == childNotCollapsible && child.length > 1) {
- childNode.setIsUserCollapsible(false);
- childNode.setExpanded(true);
- nonCollapseNode = childNode;
- }
- }
- }
- }
- function toggleNonCollapseNode() {
- nonCollapseNode.setIsUserCollapsible(!nonCollapseNode.isUserCollapsible());
- }
- function cut() {
- if (tree.getSelectedItem()) {
- clipboardNode = tree.getSelectedItem();
- if (clipboardNode.getParent()) {
- clipboardNode.getParent().remove(clipboardNode);
- }
- }
- }
- function paste() {
- if (tree.getSelectedItem() && clipboardNode) {
- tree.getSelectedItem().add(clipboardNode);
- clipboardNode = null;
- }
- }
- makeTree();
- </script>
- </body>
- </html>
|