实现一个可无限折叠的table

前言

如何在table上实现一个可折叠展开子节点的table？先看下最终实现效果图：

其实这个项目在两个月以前就以上上传在github了，但当时没有写详细的实现过程。自己前几天发表的一篇技术贴当下拉列表数据过大时，该如何应对？得到大家的不少支持，犹如歌曲《红日》里的歌词像红日之火 点燃真的我~ 所以继续为掘金社区做奉献自己微不足道的力量啦 ~~

在周末听着嗨歌写文还是很nice的~ 嗨起来 ~ ~

技术栈：

  • vue
  • javascript

动手实现

为有兴趣的同学先准备一下大纲目录预览，为了不让同学们看入迷，让大纲为你指明前行的道路！

大纲预览

  1. 明确需求
  2. 树形结构数据准备
  3. 数据扁平化（重点）
  4. 层级展示
  5. 折叠展开功能实现

1. 明确需求

实现一个可折叠展开的table，看上去很迷茫的样子。但实际上就是：

  1. 在table上点击时对其子集进行隐藏或显示
  2. 通过缩进的距离来表现层级关系

在代码里很东西其实都是伪装出来的，例如我们要实现的这个可无限折叠的table。但在用户操作的时候看来就是那么回事咯 ~ ~

2. 树形结构数据准备

这里已经准备好了树形结构的数据，存放于data.js的文件中，节点通过Children连接。如标题所说，可无限折叠，无论这里的树形数据有多少层级，都能给它办妥当了。先把牛吹在这，接下来看看如何实现。

3. 数据扁平化

条件梳理

树形结构数据扁平化并不难，难点在于在扁平化的时候要做的处理。这里深入梳理一下：

  1. 我们将一个树节点的所有父节点称为family，好比我们要知道的自己的大领导、二领导、直系领导...因为他们的命令咱们都得执行。在这个表单中就是当父节点或更高的祖辈节点发命令时，做一个懂事的子节点当然要听话办事。__family字段就是用来存放所有所有的父节点的数组。在扁平化数据是通过数组字段__family收集其所有父节点。这样一来，就像族谱一样，就能清晰知道该节点的所有父节点。至于如和折叠收缩呢？我们通过一个foldList数组来记录要折叠的节点，也称为死亡名单。如此一来，只要包含父节点标识的节点就乖乖的隐藏吧。
  1. 每个成员都因该是唯一的，那么我们在遍历时都应该为每个成员添加一个唯一标识__identity。正是上一个步骤中说的节点标志。
  1. 为了明确知道各个节点之间的层级关系，通过__level明确层级关系。那么我们规定__level的值越小等级越高。__level=0代表首层节点。
  1. 既然是无限层级，肯定是用递归来实现了。formatConversion()方法实现递归。那何时跳出当前遍历的递归呢？当前节点没有子集时Children.length = 0的时候跳出本次递归，进行下一次递归。该方法可能需要花点时间理解，代码里注释已写的比较详细，有问题欢迎留言沟通~~

数据扁平化

    /*********************************
      ** Fn: formatConversion
      ** Intro: 将树形接口数据扁平化
      ** @params: parent 为当前累计的数组  也是最后返回的数组
      ** @params: children 为当前节点仍需继续扁平子节点的数据
      ** @params: index 默认等于0， 用于在递归中进行累计叠加 用于层级标识
      ** @params: family 装有当前包含元素自身的所有父级 身份标识
      ** @params: elderIdentity 父级的  唯一身份标识
      ** Author: zyx
    *********************************/
    formatConversion (parent, children, index = 0, family = [], elderIdentity = ‘x‘) {
      // children如果长度等于0，则代表已经到了最低层
      // let page = (this.startPage - 1) * 10
      if (children.length > 0) {
        children.map((x, i) => {
          // 设置 __level 标志位 用于展示区分层级
          Vue.set(x, ‘__level‘, index)
          // 设置 __family 为家族关系 为所有父级，包含本身在内
          Vue.set(x, ‘__family‘, [...family, elderIdentity + ‘_‘ + i])
          // 本身的唯一标识  可以理解为个人的身份证咯 一定唯一。
          Vue.set(x, ‘__identity‘, elderIdentity + ‘_‘ + i)
          parent.push(x)
          // 如果仍有子集，则进行递归
          if (x.Children.length > 0) this.formatConversion(parent, x.Children, index + 1, [...family, elderIdentity + ‘_‘ + i], elderIdentity + ‘_‘ + i)
        })
      } return parent
    }

我们来对比一下扁平话的数据

  • 原数据

  • 扁平化后的数据

对比数据的前后，先明确（父节点： Name: "App"）, （子节点：Name: "企业查询"）。我们先看看__level字段，分别对应0和1，没问题。__family包含了本身节点。__identity的个格式就是前缀 x加上在数据中的位置。例如节点App在数据中的位置是第一个节点，那对应的__identity即是x_0。企业查询位于App节点下的第一个元素，则在父节点的标识的基础上追加一位0，那对应的__identity即是x_0_0。其他依次类推。一切已准备妥当~~

4. 层级展示

如图所示：

如果展示层级呢？利用css即可实现

  • 字体图标准备： 这里先补充一点，这里涉及两个字体图标，图中红色框标注的，资源存放于src目录下的iconfont目录下中。层级最低的字段时不需要展示该图标呢，该如何判断呢？ 通过判断当前节点是否还有子集params.Children.length === 0即可判断。若没有子集则不设置字体图标即可。点击时还需要对图标进行切换，这又如何实现呢？前台提到过的死亡名单foldList，如果该存在该名单中，代表该数据已经被折叠，那返回折叠图标。否则返回展开图标。如代码：
//    html
<i :class="toggleFoldingClass(scope.row)"></i>

//    js methods:

    /*********************************
      ** Fn: toggleFoldingClass
      ** Intro: 如果子集长度为0，则不返回字体图标。
      ** Intro: 如果子集长度为不为0，根据foldList是否存在当前节点的标识返回相应的折叠或展开图标
      ** Intro: 关于class说明：permission_placeholder返回一个占位符，具体查看class
      ** @params: params 当前行的数据对象
      ** Author: zyx
    *********************************/
    toggleFoldingClass (params) {
      return params.Children.length === 0 ? ‘permission_placeholder‘ : (this.foldList.indexOf(params.__identity) === -1 ? ‘iconfont icon-minus-square-o‘ : ‘iconfont icon-plussquareo‘)
    },
  • 层级展示： __level字段就是这时候发挥用处。__level值越大，则将margin-left值增大。如代码：
<p :style="`margin-left: ${scope.row.__level * 20}px;`">...

基本的样子已经有了，那接下来实现点击功能。

5. 折叠展开功能实现

记录点击的节点标识

通过死亡名单foldList来记录点击。点击事件在点击折叠展开图标时触发toggleFoldingStatus(scope.row)事件，前面也说过，foldList存在的标识，对于所有的子节点都要隐藏起来。如果foldList没有数据，则全部展开，万事大吉。代码如图所示，就是那么简单。

//    html
<i  @click="toggleFoldingStatus(scope.row)" class="permission_toggleFold" :class="toggleFoldingClass(scope.row)"></i>
//    js methods
    /*********************************
      ** Fn: toggleFoldingStatus
      ** Intro: 切换展开 还是折叠
      ** @params: params 当前点击行的数据
      ** Author: zyx
    *********************************/
    toggleFoldingStatus (params) {
      this.foldList.includes(params.__identity) ? this.foldList.splice(this.foldList.indexOf(params.__identity), 1) : this.foldList.push(params.__identity)
    },

折叠展开功能实现

万事俱备，只欠东风。最后一件要做的大事就是根据死亡名单foldList来进行显示和隐藏数据。
这里借助el-table中的row-style实现。同学们也可以自己实现。来看下官方的说明

该方法就是为table中的每一行数据设置样式。

    /*********************************
      ** Fn: toggleDisplayTr
      ** Intro: 该方法会对每一行数据都做判断 如果foldList 列表中的元素 也存在与当前行的 __family列表中  则该行不展示
      ** @params:
      ** Author: zyx
    *********************************/
    toggleDisplayTr ({row, index}) {
      for (let i = 0; i < this.foldList.length; i++) {
        let item = this.foldList[i]
        // 如果foldList中元素存在于 row.__family中，则该行隐藏。  如果该行的自身标识等于隐藏元素，则代表该元素就是折叠点
        if (row.__family.includes(item) && row.__identity !== item) return ‘display:none;‘
      }
      return ‘‘
    },
  • 在来看看效果

锦上添花

如果数据太多的话，一个层级层级的去搜索确实也麻烦，所以那么我们再来添加两个按钮全部折叠和全部展开好了。
咨询分析一下，其实这个功能很简单。还是关于前面提到过的死亡名单foldList。

  • 全部展开： 如果foldList为空，则万事大吉，数据全部展开。
  • 全部折叠：我们的设计是只要存在于死亡名单的所有包含该标识的节点都要隐藏。那么只要将所有的首层节点添加进去就可以了。this.foldList = this.tableListData.map(x => x.__identity)即取出首层节点的标识。

结语

更复杂的需求是结合分页，当从其他页回到之前页时，之前页的折叠状态要依旧保持。这里就不在说明了，因为应用场景很少。

  • 点赞给个鼓励哟~
  • 又是下午3点了，该回去吃饭午饭了。

原文地址：https://www.cnblogs.com/jlfw/p/11802543.html

时间： 2024-10-21 11:48:01

实现一个可无限折叠的table的相关文章

制作一个可以滑动操作的 Table View Cell

Apple 通过 iOS 7 的邮件(Mail)应用介绍了一种新的用户界面方案——向左滑动以显示一个有着多个操作的菜单.本教程将会向你展示如何制作一个这样的 Table View Cell,而不用因嵌套的 Scroll View 陷入困境.如果你还不知道一个可滑动的 Table View Cell 意味着什么,那么看看 Apple 的邮件应用: 可能你会想,既然 Apple 展示了这种方案,那它应该已将其开放给开发者使用了.毕竟,这能有多难呢?但不幸的是,他们只让开发者使用 Delete 按钮—

sql server 怎么为一个已经存在数据的table, 添加一个自增的主键列?

情况描述 如果你符合下面的情况, 可以参考本文的解决方案 你已经有了一个DB, 并且DB中也有了不少table, 但是table最开始的时候没有设置主键. 数据存入了一部分后, 突然想到为这个table添加主键并且自增的column. 并且不想丢失这部分数据时,,, 你的db是自己建的, 但是table以及table中的数据是通过其他的db export->import过来的, 此时新的db中的import进来的table可能是没有主键的, 即使import过来的列中包含id这种列,,, 网间对

IOS开发，使用uiscrollView和定时器实现一个自动无限滚动的广告栏（当然也支持触摸拖动）

先说一个实现的大概思路,我们知道scrollview有contentsize属性,设置用来拖动,把这个属性设置为3个imagevie的宽度 初始化显示的时候,就直接设置contentsize在第二个imageview的位置进行显示,在scrollview的代理方法中,我们可以判断contentoffset.x的值,如果减小则向左拖动,如果增加则向右拖动 如果为0代表向左拖动完成,如果为imgaeview宽度的两倍则代表向右拖动完成,当拖动完成默认将移动方向的最后一个imageview的image

一个可能会无限循环的bug.c

1 /* bug.c */ 2 #include<stdio.h> 3 int main(void){ 4 int a[10],i; 5 for(i=1;i<=10;i++){ 6 a[i]=0; 7 // printf("%d\n",a[i]); 8 // printf("i=%d\n",i); 9 } 10 return 0; 11 } 原因如下: /* 数组下标越界,如果 i 的内存地址正好在数组后面,那么当a[10]=0时,会将i自动清零,

一个页面多Table多分页的问题

一个页面有多个table,多个pagination,一个pagerForm.这种情况下怎么解决多个pagination不同pagenum的问题呢? 如果是这样的滴话,使用局部刷新就可以了,两个table 放在不同的  div 中 id 分别为  table1 table2 指定 pagination  rel 就可以了 大概就是这样 <div id="table1" > <table> <div class="pagination" r

CREATE TABLE - 定义一个新表

SYNOPSIS CREATE [ [ GLOBAL | LOCAL ] { TEMPORARY | TEMP } ] TABLE table_name ( { column_name data_type [ DEFAULT default_expr ] [ column_constraint [, ... ] ] | table_constraint | LIKE parent_table [ { INCLUDING | EXCLUDING } DEFAULTS ] } [, ... ] )

关于SQL中CTE（公用表表达式）（Common Table Expression）的总结

WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到 一．WITH AS的含义 WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候,是为了让SQL语句的可读性更高些, 也有可能是在UNION ALL的不同部分,作为提供数据的部分. 特别对于UNION ALL比较有用.因为UNION

使用ICSharpCode.TextEditor制作一个语法高亮显示的XML编辑器

使用ICSharpCode.TextEditor制作一个语法高亮显示的XML编辑器 品高工作流 的流程模拟器中使用了一个具有语法高亮和折叠功能的XML编辑器,其核心就是用了SharpDevelop中的ICSharpCode.TextEditor控件,如下图所示: 序 SharpDevelop的源代码中有一个功能丰富,支持语法高亮,代码折叠的文本编辑器控件(位置:\SharpDevelop\src\Libraries\ICSharpCode.TextEditor).本文附件的Demo工程中将演示如

物理-控制折叠：空间折叠

ylbtech-物理-控制折叠:空间折叠 空间折叠是一种因为强大的引力使空间发生扭曲的现象.这种现象是真实存在的,因而在理论上只要能达到一定的引力就能使空间发生弯曲,就好比要从一张平整的纸一端到另一端除了走两点间的直线外,还可以直接把纸叠起来,让两点靠近.因此人们普遍认为黑洞能够穿越遥远的空间,因为黑洞具有无法比拟的巨大引力,连光都不可避免的被它巨大的引力吸引,那么在这样的引力下空间也有极大的可能被折叠,这也就使得以不超越光速却能在短时间内进行宇宙旅行成为了可能. 1.返回顶部 1. 中文名:空