STEP 3Create a static data function:
When the tree needs to load the children of a recently opened folder, it will call your dataSource
function and pass in two arguments:
openedParentData
- an object containing information on the folder being openedcallback
- a function called when the data is ready for rendering
There are only two required properties within the data object passed to the callback: text
which is a string and type
can either be folder
or item
. However, you can have any number of attributes on your nodes by using the attr
object.
Let's start by creating the function staticDataSource
to handle this. Place this function within a <script>
before you initialize your tree. The tree still hasn't been initialized, so you will not see any changes yet. The following uses the names of works by M. C. Escher and will add the same children each time.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function staticDataSource(openedParentData, callback) { childNodesArray = [ { "name": "Ascending and Descending", "type": "folder" }, { "name": "Sky and Water I", "type": "item" }, { "name": "Drawing Hands", "type": "folder" }, { "name": "waterfall", "type": "item" }, { "name": "Belvedere", "type": "folder" }, { "name": "Relativity", "type": "item" }, { "name": "House of Stairs", "type": "folder" }, { "name": "Convex and Concave", "type": "item" } ]; callback({ data: childNodesArray }); } |
1 |
<button class="copy-to-clipboard" type="button" data-clipboard-target="simple-static-code">Copy</button> |