Skip to content
This repository was archived by the owner on Feb 5, 2025. It is now read-only.

optimize the lazyload feature #101

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 29 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,15 @@ $('#tree').treeview({data: getTree()});

## Data Structure

In order to define the hierarchical structure needed for the tree it's necessary to provide a nested array of JavaScript objects.
In order to define the hierarchical structure needed for the tree it's necessary to provide a nested array of JavaScript objects. You can use lazyLoad keyword to achieve dynamic data load.

Example

```javascript
var tree = [
{
text: "Parent 1",
lazyLoad: true,
nodes: [
{
text: "Child 1",
Expand All @@ -97,16 +98,20 @@ var tree = [
]
},
{
text: "Parent 2"
text: "Parent 2",
lazyLoad: true
},
{
text: "Parent 3"
text: "Parent 3",
lazyLoad: true
},
{
text: "Parent 4"
text: "Parent 4",
lazyLoad: true
},
{
text: "Parent 5"
text: "Parent 5",
lazyLoad: true
}
];
```
Expand Down Expand Up @@ -149,6 +154,7 @@ If you want to do more, here's the full node specification
id: 'something',
class: 'special extraordinary',
hideCheckbox: true,
lazyLoad: false,
nodes: [
{},
...
Expand Down Expand Up @@ -299,8 +305,21 @@ Options allow you to customise the treeview's default appearance and behaviour.
$('#tree').treeview({
data: data,
levels: 5,
lazyLoad: load_branch, // If data set lazyLoad true, define this to load data when node expand icon clicked
backColor: 'green'
});
// The load_branch funtion may be like this:
load_branch = function(node, func) {
$.ajax({
url: xxx,
dataType: 'json',
async: async,
success: function (res, status) {
func(res); // the same as $("#tree").treeview("addNode", [res, node]);
}

});
};
```
You can pass a new options object to the treeview at any time but this will have the effect of re-initializing the treeview.

Expand Down Expand Up @@ -955,7 +974,11 @@ $('#tree').treeview({
// e.g. nodeSelected -> onNodeSelected
onNodeSelected: function(event, data) {
// Your logic goes here
});
},
onRightClick: function(event, data) {
// Your logic goes here as right mouse button
}
);
```

and using jQuery .on method
Expand Down
Loading