• 树行表达方式


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

    1.常规用法

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

    1. <div id="test12" class="demo-tree-more">div>
    2. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    3. <legend>常规用法legend>
    4. fieldset>
    1. ,data1 = [{
    2. title: '江西'
    3. ,id: 1
    4. ,children: [{
    5. title: '南昌'
    6. ,id: 1000
    7. ,children: [{
    8. title: '青山湖区'
    9. ,id: 10001
    10. },{
    11. title: '高新区'
    12. ,id: 10002
    13. }]
    14. },{
    15. title: '九江'
    16. ,id: 1001
    17. },{
    18. title: '赣州'
    19. ,id: 1002
    20. }]
    21. },{
    22. title: '广西'
    23. ,id: 2
    24. ,children: [{
    25. title: '南宁'
    26. ,id: 2000
    27. },{
    28. title: '桂林'
    29. ,id: 2001
    30. }]
    31. },{
    32. title: '陕西'
    33. ,id: 3
    34. ,children: [{
    35. title: '西安'
    36. ,id: 3000
    37. },{
    38. title: '延安'
    39. ,id: 3001
    40. }]
    41. }]

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

    2.手风琴模式

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

    1. <div id="test2" class="demo-tree">div>
    2. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    3. <legend>手风琴模式legend>
    4. fieldset>
    1. tree.render({
    2. elem: '#test4'
    3. ,data: [{
    4. title: '优秀'
    5. ,children: [{
    6. title: '80 ~ 90'
    7. },{
    8. title: '90 ~ 100'
    9. }]
    10. },{
    11. title: '良好'
    12. ,children: [{
    13. title: '70 ~ 80'
    14. },{
    15. title: '60 ~ 70'
    16. }]
    17. },{
    18. title: '要努力奥'
    19. ,children: [{
    20. title: '0 ~ 60'
    21. }]
    22. }]
    23. ,accordion: true
    24. });

    树行表达图基本就是介绍这两种了,其实还有很多我就不一一介绍其他的方法方式了,只要记住都是换汤不换药的这种模式,认真去探求,一定是没有任何问题的! 加油,少年!

  • 相关阅读:
    容联七陌入选沙利文2023中国AI技术变革典型企业
    二叉树常见算法
    计算机中的加法器和比较器
    【新增功能已上线】jvs-rlues(规则引擎)及智能bi本周更新
    数组(持续更新后续)
    selenium+python自动化安装驱动 碰到的问题
    Java工厂设计模式
    玩转 K8s 权限控制:RBAC + kubeconfig 搞定 kubectl 权限管理那些事
    流沙画模拟器源码
    Java.lang.Class类 getClassLoader()方法有什么功能呢?
  • 原文地址:https://blog.csdn.net/weixin_57725431/article/details/125905524