Fuel UX Tree使用教程

2年前 9,272 0

Set up the template

In this tutorial, we reference Fuel UX and its dependencies from their CDNs. See the Getting Started page in the documentation for more info.

Create an HTML page. Paste the following for this demo, so it references CSS in the <head> and the JavaScript files Fuel UX, Bootstrap, and jQuery just above </body>.

 

Open the page on your server or with these dependencies set up in a CodePen. If you view the output, you should see a blank page. If you open the browser console, there should be no errors.

Add tree markup

Fuel UX binds to existing markup on the page (just like Bootstrap). Start by placing the tree markup inside of the body tags:

The tree control is an empty ul container until data is loaded into the tree via the dataSource method. Data can only be loaded one folder at a time.

The tree uses the markup within data-template="treebranch" and data-template="treeitem" at the time of initialization to create it's children.

This example uses the folders selectable option. The recommended markup differs if you do not want folders to be selectable. The main difference is whether the caret is located within tree-branch-name or not.

The nodes of the tree are very flexible. Based on your data, you can have a virtually unlimited variety of HTML attributes on your nodes. These attributes get added to the tree-branch and tree-item elements.


 

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 opened
  • callback - 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.

 

Back Next: Initialize the tree 

STEP 4Initialize the tree

Initialize the tree, passing in the staticDataSource you just created as the dataSource:

 

Here is this example on CodePen

ASIDEExample with an API

If you wanted to change the data providing function to fetch the dataset rows from an API and calculate the datasource properties from the results, you could do something like this (we won't be using this for our tutorial though, since it requires a specific response from your server and won't work locally.):

 

Let's return to the staticDataSource function and add custom attributes.

STEP 5Add custom attrbutes

Additional HTML attributes can be added to the attr object. The following are reserved:

  • attr.id element ID
  • cssClassclass of the tree node (please remember the style cascade)
  • attr.data-icon custom icon class
  • attr.hasChildrenwhether to hide the caret if there are no child nodes.

In the following code, data-icon has been added to the attr to use custom icons. This will apply the specified class to the icon span before the text label in folders and items.


 
Back Next: Interacting with events

STEP 6Interacting with events

Your application will want to interact with the tree by listening for events. Here are an example of a few ways. View the Tree Events table for more ways to interact.

 

Here is this example on CodePen.

 

http://blog.baibaota.com/690.html

 

 

 

 

声明：本站内容来源于原创和互联网，尊重作者版权，转载请注明来源网址，欢迎收藏，谢谢！