bitree.html

在流览器上仿CS界面的JAVASCRIPT脚本

<td><code class="type">String</code></td>
<td>An empty image</td>
</tr>
<tr>
<td><code>DEFAULT_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to as a default icon for the tree nodes</td>
</tr>
<tr>
<td><code>I_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for the I shaped tree line</td>
</tr>
<tr>
<td><code>I_MINUS_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for a collapse icon showed on top of an I shaped tree line</td>
</tr>
<tr>
<td><code>I_PLUS_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for an expand icon showed on top of an I shaped tree line</td>
</tr>
<tr>
<td><code>L_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for the L shaped tree line</td>
</tr>
<tr>
<td><code>L_MINUS_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for a collapse icon showed on top of an L shaped tree line</td>
</tr>
<tr>
<td><code>L_PLUS_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for an expand icon showed on top of an L shaped tree line</td>
</tr>
<tr>
<td><code>MINUS_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for a collapse icon</td>
</tr>
<tr>
<td><code>PLUS_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for an expand icon</td>
</tr>
<tr>
<td><code>T_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for the T shaped tree line</td>
</tr>
<tr>
<td><code>T_MINUS_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for a collapse icon showed on top of a T shaped tree line</td>
</tr>
<tr>
<td><code>T_PLUS_ICON</code></td>
<td><code class="type">String</code></td>
<td>The image file to use for an expand icon showed on top of a T shaped tree line</td>
</tr>
</tbody>
</table>
<h2>Remarks</h2>
<p>
		Before drawing the tree you need to set the <code><a href="#columnCount">columnCount</a></code>. You
		most likely also want to set the <code><a href="#columnWidths">columnWidths</a></code>, <code><a href="#columnSortTypes">columnSortTypes</a></code>,
		<code><a href="#columnNames">columnNames</a></code>, <code><a href="#indentColumn">indentColumn</a></code> and the <code><a href="#iconColumn">iconColumn</a></code>. Below is a
		typical tree:<br>
		<br>
		<code>

var tree = new BiTree;<br>
tree.setColumnCount(3);<br>
tree.setColumnWidths([100,50,150]);<br>
<br>
tree.setColumnNames(["Name", "Size", "Date"]);<br>
tree.setColumnSortTypes(["CaseInsensitiveString", "Number", "Date"]);<br>
tree.setColumnAligns(["left", "right", "left"]);<br>
<br>
tree.setIndentColumn(0);<br>
tree.setIconColumn(0);<br>
<br>
// add tree nodes<br>
<br>
parentComponent.add(tree);<br>
tree.update();<br>

		</code>
		<br>
		Make sure that the tree is <code><a href="BiComponent.html#created">created</a></code>
		when you call the update methods or the they will not do anything. The tree
		must be updated or it will not show the tree body and/or the columns
		correctly.<br>
		<br>
		You should also be careful not to update the tree when not necessary because
		the update methods are expansive.
	</p>
<h2>Method Details</h2>
<h3><a name="addNode"></a>addNode</h3>
<p>Adds a tree node as a child to the tree</p>
<h4>Syntax</h4>
<pre class="method-syntax">object.addNode(<span class="methodArgument">oChild</span> [, <span class="methodArgument">oBefore</span>])</pre>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td class="optional-header">Optional</td>
<td>Default</td>
<td>Descripton</td>
</tr>
</thead>
<tbody>
<tr>
<td><code>oChild</code></td>
<td><code class="type"><code><a href="BiTreeNode.html">BiTreeNode</a></code></code></td>
<td class="optional-column"></td>
<td></td>
<td>The tree node child to add</td>
</tr>
<tr>
<td><code>oBefore</code></td>
<td><code class="type"><code><a href="BiTreeNode.html">BiTreeNode</a></code></code></td>
<td class="optional-column"><img src="check.png" alt="checked"></td>
<td></td>
<td>If provided, the child is added before this node</td>
</tr>
</tbody>
</table>
<h4>Return Type</h4>
<p><code class="type">void</code></p>
<h3><a name="containsNode"></a>containsNode</h3>
<p>Whether the tree contains the node</p>
<h4>Syntax</h4>
<pre class="method-syntax">object.containsNode(<span class="methodArgument">oDescendant</span>)</pre>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td class="optional-header">Optional</td>
<td>Default</td>
<td>Descripton</td>
</tr>
</thead>
<tbody>
<tr>
<td><code>oDescendant</code></td>
<td><code class="type"><code><a href="BiTreeNode.html">BiTreeNode</a></code></code></td>
<td class="optional-column"></td>
<td></td>
<td>The node to test if it is contained</td>
</tr>
</tbody>
</table>
<h4>Return Type</h4>
<p><code class="type">Boolean</code></p>
<h3><a name="hasNodes"></a>hasNodes</h3>
<p>Returns true if the tree has any child nodes</p>
<h4>Syntax</h4>
<pre class="method-syntax">object.hasNodes()</pre>
<h4>Parameters</h4>
<p>No arguments.</p>
<h4>Return Type</h4>
<p><code class="type">Boolean</code></p>
<h3><a name="isLastSiblingNode"></a>isLastSiblingNode</h3>
<p>
				Returns true if the node has no next sibling node. This is always
				true for the tree component.
			</p>
<h4>Syntax</h4>
<pre class="method-syntax">object.isLastSiblingNode()</pre>
<h4>Parameters</h4>
<p>No arguments.</p>
<h4>Return Type</h4>
<p><code class="type">Boolean</code></p>
<h3><a name="isLeaf"></a>isLeaf</h3>
<p>Returns true if the tree has no child nodes</p>
<h4>Syntax</h4>
<pre class="method-syntax">object.isLeaf()</pre>
<h4>Parameters</h4>
<p>No arguments.</p>
<h4>Return Type</h4>
<p><code class="type">Boolean</code></p>
<h3><a name="removeAll"></a>removeAll</h3>
<p>Removes all child nodes (and disposes them)</p>
<h4>Syntax</h4>
<pre class="method-syntax">object.removeAll()</pre>
<h4>Parameters</h4>
<p>No arguments.</p>
<h4>Return Type</h4>
<p><code class="type">void</code></p>
<h3><a name="removeNode"></a>removeNode</h3>
<p>Removes a tree node child</p>
<h4>Syntax</h4>
<pre class="method-syntax">object.removeNode(<span class="methodArgument">oChild</span>)</pre>
<h4>Parameters</h4>
<table>
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td class="optional-header">Optional</td>
<td>Default</td>
<td>Descripton</td>
</tr>
</thead>
<tbody>
<tr>
<td><code>oChild</code></td>
<td><code class="type"><code><a href="BiTreeNode.html">BiTreeNode</a></code></code></td>
<td class="optional-column"></td>
<td></td>
<td>The node to remove</td>
</tr>
</tbody>
</table>
<h4>Return Type</h4>
<p><code class="type"><code><a href="BiTreeNode.html">BiTreeNode</a></code></code></p>
<h3><a name="reveal"></a>reveal</h3>
<p>Expands all parent tree nodes to make this item visible</p>
<h4>Syntax</h4>
<pre class="method-syntax">object.reveal()</pre>
<h4>Parameters</h4>
<p>No arguments.</p>
<h4>Return Type</h4>
<p><code class="type">void</code></p>
<h3><a name="toggle"></a>toggle</h3>
<p>Toggles the expand property</p>
<h4>Syntax</h4>
<pre class="method-syntax">object.toggle()</pre>
<h4>Parameters</h4>
<p>No arguments.</p>
<h4>Return Type</h4>
<p><code class="type">void</code></p>
</body>
</html>