iTree

https://github.com/yangguifnag/itree
Admin
iTree is a simple program that prints its own name, 'iTree'.
Tokens:746
Snippets:4
Trust Score:3.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize iTree with JSON Data and Fetch Options

Source: https://github.com/yangguifnag/itree/blob/master/html/index.html

Initializes the iTree component on a jQuery element. It fetches data from a JSON file using a POST request with FormData, then configures the tree with options like `allExpand` and `pickType`. The `onExpend` and `onCheckLabel` callbacks are also demonstrated.

```javascript
var formData = new FormData();
formData.append('token', 'c4ff8fabd517422494c8e04418214f5a');
fetch('../js/data.json',{
  method : 'post',
  body: formData
})
.then(res => res.json())
.then(data => {
  console.log(data)
  $('#bv2').iTree({
    data : data,
    allExpand : true,
    pickType : 'check',
    onExpend : function(){ },
    onCheckLabel : function(data){ 
      console.log(data)
    }
  })
})
```

--------------------------------

### Control iTree: Expand Specific Label, Destroy, Refresh

Source: https://github.com/yangguifnag/itree/blob/master/html/index.html

Illustrates advanced control methods for the iTree component. This includes expanding a node associated with a specific label, completely destroying the iTree instance, and refreshing the tree's display.

```javascript
$('#btn9').on('click',function(){
  var a = $('#bv2').iTree('expendLabel','000101041027')
  console.log(a)
})
$('#btn10').on('click',function(){
  var a = $('#bv2').iTree('destroy')
  console.log(a)
})
$('#btn11').on('click',function(){
  var a = $('#bv2').iTree('refresh')
  //console.log(a)
})
```

--------------------------------

### Control iTree: All Check, Uncheck, Check, Uncheck Node

Source: https://github.com/yangguifnag/itree/blob/master/html/index.html

Demonstrates how to programmatically control the state of nodes within the iTree component. This includes functions to check all nodes, uncheck all nodes, check a specific node by its ID, and uncheck a specific node by its ID.

```javascript
$('#btn1').on('click',function(){
  console.log($('#bv2').iTree('allCheck'))
})
$('#btn2').on('click',function(){
  console.log($('#bv2').iTree('unAllCheck'))
})
$('#btn3').on('click',function(){
  var a = $('#bv2').iTree('check','000101011001')
  console.log(a)
})
$('#btn4').on('click',function(){
  var a = $('#bv2').iTree('unCheck','000101011001')
  console.log(a)
})
```

--------------------------------

### Control iTree: Lock/Unlock Expand, All Expand/Unexpand

Source: https://github.com/yangguifnag/itree/blob/master/html/index.html

Provides methods to manage the expansion state of nodes in the iTree component. This snippet shows how to lock and unlock the ability to expand/collapse nodes, and how to expand or unexpand all nodes in the tree.

```javascript
$('#btn5').on('click',function(){
  var a = $('#bv2').iTree('lockExpand')
  console.log(a)
})
$('#btn6').on('click',function(){
  var a = $('#bv2').iTree('unLockExpand')
  console.log(a)
})
$('#btn7').on('click',function(){
  var a = $('#bv2').iTree('allExpend')
  console.log(a)
})
$('#btn8').on('click',function(){
  var a = $('#bv2').iTree('allUnExpend')
  console.log(a)
})
```
Tokens:
Raw