Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webkixi/aotoo-react-treex
react tree component that based on the aotoo
https://github.com/webkixi/aotoo-react-treex
Last synced: 1 day ago
JSON representation
react tree component that based on the aotoo
- Host: GitHub
- URL: https://github.com/webkixi/aotoo-react-treex
- Owner: webkixi
- License: mit
- Created: 2017-06-16T10:44:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-07T10:17:27.000Z (over 5 years ago)
- Last Synced: 2024-11-07T04:18:53.302Z (8 days ago)
- Language: JavaScript
- Size: 63.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# aotoo-react-treex
## Install
```bash
// install
yarn add aotoo-react-treex
```
## USAGE
Depends on aotoo this library, `Aotoo` is a global variable
```jsx
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: 123, 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 = (
{treeList.render()}
button
)
Aotoo.render(box, id)
```
## API
#### $update(opts)
```jsx
// 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)
```jsx
// 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)
```jsx
// 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)
```jsx
// 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)
```jsx
// after `treeList.render(id)`
treeList.$loading({
loading: true || jsx dom
})
```
access the above operation, will show loading bar
#### $over(opts)
```jsx
// after `treeList.render(id)`
treeList.$over({
over: true || jsx dom
})
```
access the above operation, will show over bar
#### $pulldown(opts)
```jsx
// after `treeList.render(id)`
treeList.$pulldown({
pulldown: true || jsx dom
})
```
access the above operation, will show pulldown bar
#### $trigger(opts)
```jsx
// after `treeList.render(id)`
treeList.$trigger({
trigger: true || jsx dom
})
```
access the above operation, will show trigger bar