Node API

Introducing

This is a search result. You cannot to get an access directly. It works like in jQuery: find some node (via Query) and do some action with the found node(s).

Methods which retruns this API:

• find

• findAll

• checked

• selected

Methods

find

• Description: Finds nodes by specified Query

• Arguments:

  • query: Query

• Returns:

  • NodeAPI

• Usage:

// let's find the first child node of 'Awesome Node' which has state 'checked'

this.api
    .find({text: 'Awesome Node'})
    .find({ checked: true })

findAll

• Description: Similar to find method. But it returns all found nodes.

• Arguments:

  • query: Query

• Returns:

  • NodeAPI

• Usage:

// let's find all child nodes of 'Awesome Node' which has state 'checked'

this.api
    .find({text: 'Awesome Node'})
    .findAll({ checked: true })

remove

• Description: Removes matched node.

• Returns:

  • TreeNode

  • TreeNode[]

  • null

• Usage:

this.api.selected().remove()

// how to get null?
this.api.find('not_existed_node').remove()

empty

• Description: It removes all children nodes. Also it removes isBatch property (see Acync)

• Returns:

  • boolean

  • null

• Usage:

this.api.find({ selected: true }).empty()

select

• Description: Selects matched node.

• Arguments:

  • extendSelection: boolean not required. For multiple mode adds the matched node to the list of selected items (it's like a selecting node via Ctrl)

  • expandOnSelect boolean, not required. select method will try to read this property from the tree props if expandOnSelect argument is not pass

• Returns:

  • boolean

  • null

• Usage:

this.api.find('Item 1').select()
this.api.find('Item 2').select(true) // add Item 2 to selected nodes

expandOnSelect example

const data = [
    'Item 1', 'Item 2', 'Item 3'
]

this.api.find(/Item/).select() // selected node: Item 1

// only for multiple mode (!)
this.api.find(/Item 2/).select(true) // selected nodes: Item 1, Item 2

this.api.findAll(/Item/).select() // selected node: Item 3
this.api.findAll(/Item/).select(true) // selected nodes: Item 1, Item 2, Item 3

this.api.find(/Item WITH child/)
    .select(false, true) // it will expand node

unselect

• Description: Removes Selection for matched node.

• Returns:

  • boolean

• Usage:

// remove all selections
this.api.findAll({ selected: true }).unselect()

check

• Description: Sets matched node as ticked(checked).

• Returns:

  • boolean

• Usage:

// check all nodes which is not leaf (has children)
this.api.findAll({ isLeaf: false }).check()

uncheck

• Description: Sets matched node as not ticked(checked).

• Returns:

  • boolean

• Usage:

// unchkeck all checked nodes
this.api.checked().uncheck()

disable

• Description: Sets matched node as disabled.

• Returns:

  • boolean

• Usage:

this.api.find('Item 1').disable()

enable

• Description: Sets matched node as enabled.

• Returns:

  • boolean

• Usage:

this.api.findAll({ disabled: true }).enable()

enableCheckbox

• Description: Sets checkbox state for matched node as enabled.

• Returns:

  • boolean

• Usage:

this.api.findAll({ disabledCheckbox: true }).enableCheckbox()

disableCheckbox

• Description: Sets checkbox state for matched node as disabled.

• Returns:

  • boolean

• Usage:

this.api.findAll({ checked: true }).disableCheckbox()

expand

• Description: Expands matched node.

• Arguments:

  • includingDisabled: boolean (default false).

• Returns:

  • boolean

• Usage:

this.api.findAll({ expanded: false }).expand(true)

collapse

• Description: Collapses matched node.

• Arguments:

  • includingDisabled: boolean (default false).

• Returns:

  • boolean

• Usage:

this.api.findAll({ expanded: true }).collapse()

data

You can store here whatever you want.

• Description: It is getter/setter for the data property of the node.

• Arguments:

  • key: string | object

  • value : any (not required)

• Returns:

  • undefined

  • data object

  • TreeNode

• Usage:

// tree data
const data = [
    { text: 'Item 1', data: { isSuper: true } },
    { text: 'Item 2' },
    { text: 'Item 3' }
]

// it will find the first item (!)
this.api.find(/Item/).data('isSuper', false)
// or
this.api.find(/Item/).data({ isSuper: false }) // overrides the whole object

// return a value: value (false)
this.api.find(/Item/).data('isSuper')

// get full data object: { isSuper: false }
this.api.find(/Item/).data()

// setter: return NodeAPI
this.api.find(/Item/).data({ isSuper2: false })
// this.api.find(/Item/).data() will return { isSuper: false, isSuper2: false }

// as you can see it's possible you use API after setting the data
this.api.find(/Item/)
    .data('isSuper2', 'string')
    .expand()

How to set/get data for multiple nodes?

// set isSuper === false for nodes: `Item 2` and `Item 3`
this.api.findAll(/Item (2|3)/).data({ myProp: false })

// Get data for multiple nodes. It will return an array
this.api.findAll(/Item/).data('myProp')
// result will be: [undefined, false, false]

hasClass

• Description: Checks if a node has a className

• Arguments:

  • className: string

• Returns:

  • boolean

• Usage:

const hasClass = this.api.find(/excess/).hasClass('highligted')

addClass

• Description: It will add classNames for the node. This class will be added to the node with the class .node-content (check Node's structure)

• Arguments:

  • Array<className>: string[]

• Returns:

  • TreeNode if node is found

• Usage:

this.api.find(/excess/).addClass(['excess-node', 'you-can', 'pass', 'many', 'names'])
this.api.findAll(/excess/).addClass(['red-border'])

removeClass

• Description: The same behavior as addClass method, but it removes classNames

• Arguments:

  • Array<className>: string[]

• Returns:

  • boolean

• Usage:

this.api.find(/excess/).removeClass(['excess-node', 'pass', 'many', 'names'])
this.api.find(/focused/).removeClass(['focused'])

append

• Description: Inserts nodes to the end of the matched node

• Arguments:

  • nodes: string | object | Promise

  • opts: Insertion options

• Returns:

  • Promiselike<TreeNode[]> added nodes (always an array)

• Usage:

const appendedNodes = this.api.find('Item 1').append(
    ['Item 1.1.', 'Item 1.2'], // nodes can be as string
    { expand: true } // expand node with text 'Item 1' (if node was found)
)

this.api.find({ selected: true }).append(
    [
        { text: 'Selected children 1', disabled: true },
        { text: 'Selected children 2' }        
    ]
)

// it also can be a function, but it must return a Promise
this.api.find('Selected children 2').append(
    (node) => {
        // node.text === 'Selected children 2'
        return fetch(`/api?childName=${node.text}`)
            .then(response => response.json())
    }
)

prepend

• Description: This method is similar to append. But nodes inserting to the beginning of children list. (well ... you know, as well as jQuery :) )

• Example:

// tree structure
/**
item 1
item 2
 item 2.1
 item 2.2
item 3
*/

this.api.find('item 2').append([
 'item 2.3', 'item 2.4', { text: 'item 2.5', checked: true }
])

// will be:
/**
item 1
 item 2.3    << new node
 item 2.4    << new node
 item 2.5    << new node
 item 2.1
 item 2.2
item 2
item 3
*/

before

• Description: This method is similar to append. But nodes inserting before matched node.

• Example:

// tree structure
/**
item 1
item 2
item 3
*/

this.api.find(/item 2/).before(, 'item n')

// will be:
/**
item 1
item n <<<<<<< -- added node
item 2
item 3
*/

after

• Description: This method is similar to append. But nodes inserting after matched node.

// tree structure
/**
item 1
item 2
item 3
*/

this.api.find(/item 2/).before('item n')

// will be:
/**
item 1
item 2
item n <<<<<<< -- added node
item 3
*/