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