300 lines
5.2 KiB
Markdown
300 lines
5.2 KiB
Markdown
# Usage: v0.2.0.248
|
|
|
|
This is the usage guide for [LiteRyzJS/Treeview](/literyzjs-treeview), version 0.2.0.248.
|
|
|
|
## Usage
|
|
|
|
### LiteRyzJS.Treeview(options)
|
|
|
|
Creates a treeview.
|
|
|
|
#### Options
|
|
|
|
```javascript
|
|
{
|
|
ID: "#treeview1",
|
|
ShowCheckbox: true,
|
|
ShowSelection: true,
|
|
ShowIcon: true,
|
|
EnableGuardian: false,
|
|
EnableCascade: true
|
|
}
|
|
```
|
|
|
|
#### Parameters
|
|
|
|
| Parameter | Type | Description |
|
|
|-----------|------|-------------|
|
|
| ID | string | The container element for the treeview |
|
|
| ShowCheckbox | bool | Show checkboxes in treeview |
|
|
| ShowSelection | bool | Show selection (highlighting) |
|
|
| ShowIcon | bool | Show node icon |
|
|
| EnableGuardian | bool | If true, the parent node is checked if any of its child nodes are checked. |
|
|
| EnableCascade | bool | If true, the parent node is checked if all of its child nodes are checked. |
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
var treeview1 = new LiteRyzJS.Treeview({
|
|
ID: "#treeview1",
|
|
ShowCheckbox: true,
|
|
ShowSelection: true,
|
|
ShowIcon: true,
|
|
EnableGuardian: false,
|
|
EnableCascade: true
|
|
});
|
|
```
|
|
|
|
### AddItem(options)
|
|
|
|
Add a node to the treeview
|
|
|
|
#### Options
|
|
|
|
```javascript
|
|
{
|
|
ID: null,
|
|
ParentID: null,
|
|
Name: "",
|
|
Hint: "",
|
|
Value: "",
|
|
Icon: "folder",
|
|
Checked: false,
|
|
Tag: null
|
|
}
|
|
```
|
|
|
|
#### Parameters
|
|
|
|
| Parameter | Type | Description |
|
|
|-----------|------|-------------|
|
|
| ID | string | The identifier for this node |
|
|
| ParentID | string | The identifier for the parent node |
|
|
| Name | string | Label of the node |
|
|
| Hint | string | Hint for the node |
|
|
| Value | string | Value returned, if checkboxes are enabled and node is checked |
|
|
| Icon | string | Icon of the node, default is "folder" |
|
|
| Checked | string | Is folder is checked |
|
|
| Tag | string | Additional object for this node |
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
treeview1.AddItem({
|
|
ID: "F1",
|
|
ParentID: null,
|
|
Name: "Folder 1",
|
|
Hint: "Folder 1",
|
|
Value: "F1",
|
|
Icon: "folder",
|
|
Checked: false,
|
|
Tag: null
|
|
});
|
|
```
|
|
|
|
### Remove(id)
|
|
|
|
Remove node from treeview by identifier
|
|
|
|
#### Parameters
|
|
|
|
| Parameter | Type | Description |
|
|
|-----------|------|-------------|
|
|
| ID | string | The identifier for the node |
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
treeview1.Remove("F1");
|
|
```
|
|
|
|
### Clear()
|
|
|
|
Clear all treeview nodes
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
treeview1.Clear();
|
|
```
|
|
|
|
### Find(id)
|
|
|
|
Find a treeview node by its identifier
|
|
|
|
#### Parameters
|
|
|
|
| Parameter | Type | Description |
|
|
|-----------|------|-------------|
|
|
| ID | string | The identifier for this node |
|
|
|
|
#### Result
|
|
|
|
```javascript
|
|
{
|
|
ID: "",
|
|
Node: null,
|
|
Container: null,
|
|
Label: "",
|
|
Value: "",
|
|
Name: "",
|
|
Hint: "",
|
|
ParentID: null,
|
|
Checked: false,
|
|
Highlighted: false,
|
|
Tag: null
|
|
}
|
|
```
|
|
|
|
| Property | Type | Description |
|
|
|----------|------|-------------|
|
|
| ID | string | The identifier for this node |
|
|
| Node | Element | The [li] element of the node |
|
|
| Container | string | The container [div.li] element of the label component of the node |
|
|
| Label | string | The label [span] element of the node |
|
|
| Value | string | The checkbox value of the node |
|
|
| Name | string | The text label of the node |
|
|
| Hint | string | The text hint of the node |
|
|
| ParentID | string | The identifier for the parent node |
|
|
| Highlighted | bool | True, if highlighted. |
|
|
| Checked | bool | True, if checked. |
|
|
| Tag | object | User defined object on this node |
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
let result = treeview1.Find("F1");
|
|
```
|
|
|
|
### FindByName(name)
|
|
|
|
Find a treeview node by its name
|
|
|
|
#### Parameters
|
|
|
|
| Parameter | Type | Description |
|
|
|-----------|------|-------------|
|
|
| Name | string | The name of this node |
|
|
|
|
#### Result
|
|
|
|
Returned an array of node results, see **Find**.
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
let result = treeview1.FindByName("F1");
|
|
```
|
|
|
|
### FindByValue(value)
|
|
|
|
Find a treeview node by its value
|
|
|
|
#### Parameters
|
|
|
|
| Parameter | Type | Description |
|
|
|-----------|------|-------------|
|
|
| Value | string | The value of this node |
|
|
|
|
#### Result
|
|
|
|
Returned an array of node results, see **Find**.
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
let result = treeview1.FindByValue("F1");
|
|
```
|
|
|
|
### GetAllNodes()
|
|
|
|
Get an array of all nodes
|
|
|
|
#### Result
|
|
|
|
Returned an array of node results, see **Find** for details.
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
let result = treeview1.GetAllNodes();
|
|
```
|
|
|
|
### GetCheckedNodes()
|
|
|
|
Get an array of all checked nodes
|
|
|
|
#### Result
|
|
|
|
Returned an array of node results, see **Find** for details.
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
let result = treeview1.GetCheckedNodes();
|
|
```
|
|
|
|
### GetCheckedValues()
|
|
|
|
Get an array of values from all checked nodes
|
|
|
|
#### Result
|
|
|
|
Returned an array of values.
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
let result = treeview1.GetCheckedValues();
|
|
```
|
|
|
|
### GetSelectedNode()
|
|
|
|
Get the selected node
|
|
|
|
#### Result
|
|
|
|
Returned the selected node result, see **Find** for details.
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
let node = treeview1.GetSelectedNode();
|
|
```
|
|
|
|
### ExpandAll()
|
|
|
|
Expand all nodes
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
treeview1.ExpandAll();
|
|
```
|
|
|
|
### CollapseAll()
|
|
|
|
Collapse all nodes
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
treeview1.CollapseAll();
|
|
```
|
|
|
|
### CheckAll(value)
|
|
|
|
Check or uncheck all nodes
|
|
|
|
#### Parameters
|
|
|
|
| Parameter | Type | Description |
|
|
|-----------|------|-------------|
|
|
| Value | bool | Check or uncheck all nodes |
|
|
|
|
#### Examples
|
|
|
|
```javascript
|
|
treeview1.CheckAll(true);
|
|
```
|