aotoo-react-treex

Install

// install
yarn add aotoo-react-treex

USAGE

Depends on aotoo this library, Aotoo is a global variable

import Aotoo from 'aotoo'
import treex from 'aotoo-react-treex'

const _data = [ 
  {title: '', idf: 'aaa'},
  {title: 'abcfd', parent: 'aaa' },
  {title: 'bcasd', parent: 'aaa' },
  {title: 'aacwq', parent: 'aaa'},

  {title: <button>123</button>, idf: 'bbb'},
  {title: 'yyufs', parent: 'bbb'},
  {title: 'xfdsw', parent: 'bbb'},
  {title: 'xxxdsehh', parent: 'bbb'}, 
]

const treeList = treex({ data: _data })

// Render in the dom of the specified id  
treeList.render(id, function(dom){
  // dom => ul.li
  $(dom) ...
})

// ========  or 

treeList.rendered = function(dom){
  $(dom) ...
}
const box = (
  <div>
    {treeList.render()}
    <button>button</button>
  </div>
)

Aotoo.render(box, id)

API

$update(opts)

// after `treeList.render(id)`，You can dynamically update the structure after you update the data(_data)

treeList.$update({
  index: 1,
  data: {title: 'hello world', parent: 'aaa' }
})

// ======== or 

treeList.$update({
  data: [
    {title: 'one'},
    ...
  ]
})

The above operation causes the structure to be re-rendered and the callback method rendered is executed again

$append(opts)

// after `treeList.render(id)`

treeList.$append({
  data: {title: 'hello world', parent: 'aaa' }
})

// ======== or 

treeList.$append({
  data: [
    {title: 'one'},
    ...
  ]
})

access the above operation, you can dynamically append the structure after you append the data(_data)

$prepend(opts)

// after `treeList.render(id)`

treeList.$prepend({
  data: {title: 'hello world', parent: 'aaa' }
})

// ======== or 

treeList.$prepend({
  data: [
    {title: 'one'},
    ...
  ]
})

access the above operation, you can dynamically prepend the structure after you prepend the data(_data)

$delete(opts)

// after `treeList.render(id)`

treeList.$delete({
  index: 1
})

// ======== or 

treeList.$delete({
  query: {title: 'abcfd'}
})

access the above operation, you can dynamically delete the structure after you delete the data(_data)

List status

$loading(opts)

// after `treeList.render(id)`

treeList.$loading({
  loading: true || jsx dom
})

access the above operation, will show loading bar

$over(opts)

// after `treeList.render(id)`

treeList.$over({
  over: true || jsx dom
})

access the above operation, will show over bar

$pulldown(opts)

// after `treeList.render(id)`

treeList.$pulldown({
  pulldown: true || jsx dom
})

access the above operation, will show pulldown bar

$trigger(opts)

// after `treeList.render(id)`

treeList.$trigger({
  trigger: true || jsx dom
})

access the above operation, will show trigger bar