Tree row expression

The structure of the tree chart is self-evident , Very easy to use and practical perfection , So now let me briefly introduce the usage and structure of tree rows ！！

1. Routine usage

This is a table view of tree row structure It mainly expresses provinces City   And area , The purpose of doing this , Is to express the intention of the structure more clearly Used to highlight practicality Simplicity Perfection This part of .

<div id="test12" class="demo-tree-more"></div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend> Routine usage </legend>
</fieldset>

 ,data1 = [{
    title: ' jiangxi '
    ,id: 1
    ,children: [{
      title: ' nanchang '
      ,id: 1000
      ,children: [{
        title: ' Qingshanhu district '
        ,id: 10001
      },{
        title: ' High-tech zone '
        ,id: 10002
      }]
    },{
      title: ' Jiujiang '
      ,id: 1001
    },{
      title: ' Ganzhou '
      ,id: 1002
    }]
  },{
    title: ' guangxi '
    ,id: 2
    ,children: [{
      title: ' nanning '
      ,id: 2000
    },{
      title: ' guilin '
      ,id: 2001
    }]
  },{
    title: ' shaanxi '
    ,id: 3
    ,children: [{
      title: ' Xi'an '
      ,id: 3000
    },{
      title: ' yanan '
      ,id: 3001
    }]
  }]

  How about these , It is the code that indicates the tree row structure , Main use data To express the intention ,title It means province Of course It can also contain chidren Once again, a title To show one of the municipal cities It can also be applied all the time chidren To apply this , You can connect wirelessly , Show the practical relationship .

2. Accordion mode

This figure is also a graph of tree row structure But the use method is completely different from the former structure , But the general meaning is exactly the same , So the choice between the two , The so-called way of changing soup without changing medicine expresses the same meaning ！

 
<div id="test2" class="demo-tree"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend> Accordion mode </legend>
</fieldset>

tree.render({
    elem: '#test4'
    ,data: [{
      title: ' good '
      ,children: [{
        title: '80 ~ 90'
      },{
        title: '90 ~ 100'
      }]
    },{
      title: ' good '
      ,children: [{
        title: '70 ~ 80'
      },{
        title: '60 ~ 70'
      }]
    },{
      title: ' Try hard '
      ,children: [{
        title: '0 ~ 60'
      }]
    }]
    ,accordion: true 
  });

Tree row representation diagram basically introduces these two , In fact, there are many other methods that I will not introduce one by one , Just remember that it's a pattern of changing soup without changing medicine , Seriously explore , There must be no problem ！ come on. , juvenile ！