树行表达方式_树形菜单手风琴模式是什么意思-CSDN博客

本文链接：https://blog.csdn.net/weixin_57725431/article/details/125905524

树形图的结构大家不言而喻，非常的好用以及实用的完美性相结合，所以现在我给大家简洁的介绍一下树行的用法以及结构性！！

1.常规用法

这是树行结构的一个表视图主要表达省份市以及区，这样做的目的呢，就是更加鲜明的表达出结构的用意用来凸显实用化简洁化完美化的这一部分。

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

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>常规用法</legend>
</fieldset>

 ,data1 = [{
    title: '江西'
    ,id: 1
    ,children: [{
      title: '南昌'
      ,id: 1000
      ,children: [{
        title: '青山湖区'
        ,id: 10001
      },{
        title: '高新区'
        ,id: 10002
      }]
    },{
      title: '九江'
      ,id: 1001
    },{
      title: '赣州'
      ,id: 1002
    }]
  },{
    title: '广西'
    ,id: 2
    ,children: [{
      title: '南宁'
      ,id: 2000
    },{
      title: '桂林'
      ,id: 2001
    }]
  },{
    title: '陕西'
    ,id: 3
    ,children: [{
      title: '西安'
      ,id: 3000
    },{
      title: '延安'
      ,id: 3001
    }]
  }]

这些呢，就是表明树行结构的代码，主用data 来表示其中的用意，title表示的就是省份当然在里面也可以包含chidren 再次声明一个title来表明其中的一个市级城市也可以一直套用chidren 来套用这个，可以无线连接下去，表明其中的实用关系。

2.手风琴模式

此图也是树行结构的图形但是使用方法与前一种是完全不相同的结构，但是大致的意思是完全的相同，所以说二者选一的抉择，所谓换汤不换药的这种方式去表达同一种意思！

 
<div id="test2" class="demo-tree"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>手风琴模式</legend>
</fieldset>

tree.render({
    elem: '#test4'
    ,data: [{
      title: '优秀'
      ,children: [{
        title: '80 ~ 90'
      },{
        title: '90 ~ 100'
      }]
    },{
      title: '良好'
      ,children: [{
        title: '70 ~ 80'
      },{
        title: '60 ~ 70'
      }]
    },{
      title: '要努力奥'
      ,children: [{
        title: '0 ~ 60'
      }]
    }]
    ,accordion: true 
  });