类递归循环实现表格目录

最新推荐文章于 2022-11-23 10:33:15 发布
最新推荐文章于 2022-11-23 10:33:15 发布
阅读量365 收藏
点赞数 1
分类专栏： 前端开发 文章标签： 目录表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/irene1991/article/details/79299921
版权

实现效果如下


后端数据结构

var res={
  "code": 200,
  "msg": "成功",
  "data": {
    "product": [
      {
        "id": "1",
        "fid": "0",
        "levelName": "产品第一级",
        "companyId": "1",
        "isLeaf": 0,
        "level": 1,
        "innerCategoryList": [
          {
            "id": "3",
            "fid": "1",
            "levelName": "产品第二级2",
            "companyId": "1",
            "isLeaf": 0,
            "level": 2,
            "innerCategoryList": [
              {
                "id": "7",
                "fid": "3",
                "levelName": "产品第三级2",
                "companyId": "1",
                "isLeaf": 0,
                "level": 3,
                "innerCategoryList": [],
                "robotVoList": []
              },
              {
                "id": "20180208141501100005",
                "fid": "3",
                "levelName": "测试添加产品第三级",
                "companyId": "1",
                "isLeaf": 0,
                "level": 2,
                "innerCategoryList": [],
                "robotVoList": [
                  {
                    "robotId": "2",
                    "robotName": "robot"
                  }
                ]
              }
            ],
            "robotVoList": []
          },
          {
            "id": "2",
            "fid": "1",
            "levelName": "产品第二级1",
            "companyId": "1",
            "isLeaf": 0,
            "level": 2,
            "innerCategoryList": [
              {
                "id": "6",
                "fid": "2",
                "levelName": "产品第三级1",
                "companyId": "1",
                "isLeaf": 0,
                "level": 3,
                "innerCategoryList": [],
                "robotVoList": [
                  {
                    "robotId": "5",
                    "robotName": "r-5000"
                  },
                  {
                    "robotId": "4",
                    "robotName": "r-4000"
                  }
                ]
              }
            ],
            "robotVoList": [
              {
                "robotId": "5",
                "robotName": "r-5000"
              },
              {
                "robotId": "4",
                "robotName": "r-4000"
              }
            ]
          },
          {
            "id": "20180209112124100006",
            "fid": "1",
            "levelName": "cccccc",
            "companyId": "1",
            "isLeaf": 0,
            "level": 1,
            "innerCategoryList": [
              {
                "id": "20180209112521100007",
                "fid": "20180209112124100006",
                "levelName": "ccccc3",
                "companyId": "1",
                "isLeaf": 0,
                "level": 2,
                "innerCategoryList": [],
                "robotVoList": []
              }
            ],
            "robotVoList": []
          },
          {
            "id": "5",
            "fid": "1",
            "levelName": "产品第二级4",
            "companyId": "1",
            "isLeaf": 0,
            "level": 2,
            "innerCategoryList": [],
            "robotVoList": []
          },
          {
            "id": "4",
            "fid": "1",
            "levelName": "产品第二级3",
            "companyId": "1",
            "isLeaf": 0,
            "level": 2,
            "innerCategoryList": [
              {
                "id": "8",
                "fid": "4",
                "levelName": "产品第三级3",
                "companyId": "1",
                "isLeaf": 0,
                "level": 3,
                "innerCategoryList": [],
                "robotVoList": []
              },
              {
                "id": "20180206142911100003",
                "fid": "4",
                "levelName": "ceshi004",
                "companyId": "1",
                "isLeaf": 0,
                "level": 2,
                "innerCategoryList": [],
                "robotVoList": []
              }
            ],
            "robotVoList": []
          }
        ],
        "robotVoList": [
          {
            "robotId": "3",
            "robotName": "r-3000"
          }
        ]
      }
    ]
  }

}

前端代码 类递归循环

//递归目录
function categoryDoLoop(firstCategoryData,secondCategoryData,levelOneId,firstCategoryCheck,secondCategoryCheck,thirdCategoryCheck){
    var trElement="";
    var firstRowspan=1;
    var secondRowspan=1;
    var firstCategoryHtml="";
    var secondCategoryHtml="";
    //判断二级目录是否存在
    if(secondCategoryData.length !=0 ){
        //二级目录存在
        for(var i=0;i<secondCategoryData.length;i++){
            //循环二级目录//判断第三级目录是否存在
            var thirdCategory=secondCategoryData[i].innerCategoryList.length;
            thirdCategory==0?thirdCategory=1:thirdCategory;
            firstRowspan+=thirdCategory;
            secondRowspan=thirdCategory;

            if(i==0){
                secondCategoryHtml+=`<td rowspan="${secondRowspan}"><input data-level="2" type="checkbox" class="${secondCategoryCheck}" val="${secondCategoryData[i].id}" data-id="${secondCategoryData[i].id}"/></td><td class="editStyle editBtn" data-level="2" data-levelOneId="${levelOneId}" data-toggle="modal" data-target="#myModal_edit" rowspan="${secondRowspan}" data-id="${secondCategoryData[i].id}">${secondCategoryData[i].levelName}</td>`;
            }else{
                secondCategoryHtml+=`<tr><td rowspan="${secondRowspan}"><input data-level="2" type="checkbox" class="${secondCategoryCheck}" val="${secondCategoryData[i].id}" data-id="${secondCategoryData[i].id}"/></td><td class="editStyle editBtn" data-level="2" data-levelOneId="${levelOneId}" data-toggle="modal" data-target="#myModal_edit" rowspan="${secondRowspan}" data-id="${secondCategoryData[i].id}">${secondCategoryData[i].levelName}</td>`;
            }

            if(secondCategoryData[i].innerCategoryList.length != 0){
                //三级目录存在
                var thirdCategoryData=secondCategoryData[i].innerCategoryList;
                //循环三级目录
                var thirdCategoryHtml="";
                for(var k=0;k<secondCategoryData[i].innerCategoryList.length;k++){
                    if(k==0){
                        thirdCategoryHtml+=`<td><input data-level="3" type="checkbox" class="${thirdCategoryCheck}" val="${thirdCategoryData[k].id}" data-id="${thirdCategoryData[k].id}" data-fid="${thirdCategoryData[k].fid}"/></td><td class="editStyle editBtn" data-level="3" data-levelOneId="${levelOneId}" data-toggle="modal" data-target="#myModal_edit" data-id="${thirdCategoryData[k].id}">${thirdCategoryData[k].levelName}</td>`;
                    }else{
                        thirdCategoryHtml+=`<tr><td><input data-level="3" type="checkbox" class="${thirdCategoryCheck}" val="${thirdCategoryData[k].id}" data-id="${thirdCategoryData[k].id}" data-fid="${thirdCategoryData[k].fid}"/></td><td class="editStyle editBtn" data-level="3" data-levelOneId="${levelOneId}" data-toggle="modal" data-target="#myModal_edit" data-id="${thirdCategoryData[k].id}">${thirdCategoryData[k].levelName}</td></tr>`;
                    }
                }
            }else{
                //三级目录不存在
                thirdCategoryHtml="<td></td><td></td>"
            }
            secondCategoryHtml=secondCategoryHtml+thirdCategoryHtml+"</tr>";
        }
        firstRowspan=Number(firstRowspan)-1;
        firstCategoryHtml=`<tr><td rowspan="${firstRowspan}"><input data-level   ="1" type="checkbox" class="${firstCategoryCheck}" val="${levelOneId}" data-id="${firstCategoryData.id}"/></td><td rowspan="${firstRowspan}" data-id="${levelOneId}">${firstCategoryData.levelName}</td>`;

        trElement=firstCategoryHtml+secondCategoryHtml;
        return trElement;
    }else{
        //二级目录不存在
        firstCategoryHtml=`<tr><td><input data-level="1" type="checkbox" class="${firstCategoryCheck}" val="${levelOneId}" data-id="${firstCategoryData.id}"/></td><td data-id="${levelOneId}">${firstCategoryData.levelName}</td>
<td></td><td></td><td></td><td></td></tr>`;
trElement= firstCategoryHtml; return trElement; }}

渲染到页面

if(res.data.product != undefined){
    //产品信息
    var productSecondCategoryData=res.data.product[0].innerCategoryList;
    var productFirstCategoryData=res.data.product[0];
    var productId=2;
    var firstCategoryCheck="product productFirstCategoryCheck";
    var secondCategoryCheck="product productSecondCategoryCheck";
    var thirdCategoryCheck="product productThirdCategoryCheck";
    var productTr=categoryDoLoop(productFirstCategoryData,productSecondCategoryData,productId,firstCategoryCheck,secondCategoryCheck,thirdCategoryCheck);
    $("#mainTbody").append(productTr);
}

总结：

一级目录固定,rowspan默认为1；

二级目录的合并rowspan是其下三级目录的数组长度+1；

一级目录的合并rowspan是其下所有二级目录的rowspan的和；

Irene1991
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
sentiment-analysis-keras-lstm:使用Keras和LSTM递归神经网络对感觉进行分类
05-19
情绪分析keras-lstm 使用Keras和LSTM递归神经网络对感觉进行分类这是视频中显示的代码： : 依存关系您将需要以下已安装的软件包： 张量流> = 1.8.0 keras> = 2.1.5 matplotlib> = 2.2.2 nltk> = 3.2.5 tqdm> = 4.23....
mysql 递归表的创建_mysql 中创建递归函数
weixin_34542865的博客
01-20 378
1.在navicat中创建递归函数BEGINDECLARE fname VARCHAR(8000) DEFAULT '';DECLARE strname varchar(8000) default '';DECLARE fid varchar(100) default '';DECLARE str varchar(1000) default rootId;DECLARE indexOrer INT...
递归查找分类表
asrbily的博客
03-02 143
分类表设计 @Data @AllArgsConstructor @NoArgsConstructor public class CategoryVo { private String id; private String name; private String parent; private List<CategoryVo> children; } @Data @AllArgsConstructor @NoArgsConstructor public class Category {
怎么建递归的表。
舞亦香满衣
12-03 1071
  parentIdchildIdtitle10 childId=0;//父节点21不等于0=>子节点,parentId=1的子节点31不等于0=>子节点,parentId=1的子节点40 childId=0;//父节点52不等于0=>子节点,parentId=2的子节点下图是对这个递归表的树状表示：<spanlang=EN-US style=font-size:10.5pt;mso-bid
递归查询表结构
超威半导体
03-29 1270
对于业务逻辑的编写我们大都是对于数据库表的增删改查，但是遇到特殊的查询也会涉及到算法的应用，例如在查询一个行业字典表的时候我们的需求就是要获取到整个行业的信息，这是一个典型的树形关系，节点就是Industry这个entity，它的子分类是一个list，我们可以定义这样的表结构去存储行业的信息。 最开始考虑到我们实际的应用情况貌似只有二级所以只用了两层就用了两层循环去遍历，但是后来我考虑到以后细分
递归展示树状图/树状表格
程序员小雨的博客
11-23 829
java递归展示树状表格 java递归展示树状图 java递归写法
java学习笔记-java思维导图流程图表格整理
11-19
递归 24 Java数组 25 数组声明创建 25 三种初始化 25 静态初始化 26 动态初始化 26 默认初始化 26 数组的四个基本特点 27 二维数组 27 Arrays类 28 稀疏数组 29 面向对象编程 32 值传递和引用传递 33 创建和初始化...
leetcode中国-Data-Structures-And-Algorithms-Roadmap:数据结构和算法路线图
06-29
循环队列 应用/问题 • 二叉树 树遍历 树木的建造 树视图 标准问题 • BST BST的建设 基于转换的问题 BST中的修改 标准问题 优先队列和堆 基于实现的问题 基于转换的问题 基于 K 的问题 • 图表 图遍历 - BFS 和 DFS...
论文研究 - 猫科动物和德克萨斯电锯约瑟夫斯问题的推广
05-17
这一循环一直持续到除一名玩家之外的所有玩家都丧生。 给定非负整数参数n，k，s和ℓ，游戏的目标是识别尚存的玩家。 在本文中，我们展示了定义参数n，k，s和how如何影响具有特定约束的游戏幸存者，我们的主要结果...
单片机如何精简代码量以及提升运行速度技巧介绍.docx
最新发布
04-20
单片机 在单片机编程中，精简代码量和提升... - 避免深度递归，考虑迭代实现。 6. **使用查表法**： - 对于复杂但重复的计算，如三角函数等，预先计算好结果存入表格，运行时直接查找。 ### 提升运行速度： 1. **
树形表格 treetable 完整版 带演示demo例子
12-15
对网上的树形表格treeTable进行了二次开发扩展，带演示demo例子
jpa单表递归树形结构实现
07-23
springJpa单标递归树形结构
向下递归表
xilimn的博客
09-09 322
转载自：https://mp.weixin.qq.com/s/Ccuzt9N0vEgovgH4bR9jbQ 3向下递归表 member / 2谓词的工作方式是递归地处理表中的内容，对头部进行处理，然后对末尾进行相同处理。以这种方式递归表（或实际上是几个表）在Prolog中极为常见。实际上非常普遍，因此真正掌握这项技术很重要。因此，让我们来看另一个示例。 在处理表时，我们经常希望将一个表与另一个表进行比较，或者将一个表的位复制到另一个表中，或者将一个表的内容转换为另一个表或类似的内容。这里有一...
vue el-table实现递归嵌套
Missxu1895的博客
07-20 2166
vue el-table 递归组件
vue项目动态创建表格（模板字符串+递归+scss）
yan_hai_的博客
12-30 2282
根据后端数据（数据格式为多层嵌套数组）动态创建一行对多行的表格 效果图 html代码 如果表头也是后端数据动态加载，可用for循环 js代码 mounted: function () { this.oppd() }, methods: { oppd() { let html = this.createTab(this.table1) ...
C#之MVC:初学者之非常基础的递归单表
lby_Beginner的博客
02-04 296
序言 您好！ 这是我第一次发表文章。闲话少叙，在我踏上学习C#这条一路以后，作为一名新手，作为女生，不后悔。我的技术水平目前约为一渣渣，各位您请批评指教。如有兴趣，可阅读本篇文章，大略了解一下我的第一天记录。 开始 ☆工具说明： 数据库:Microsoft SQL Server Management Studio 17 编码：启动 Visual Studio 2017 的实验实例 MVC ADO ...
vue递归组件实现动态多级表头-elementui
qq_44162778的博客
08-02 950
vue通过递归组件实现动态渲染elementui多级表头
递归例子，数组实现表格
m0_46385600的博客
03-19 321
加粗样式函数的递归，原理 就是在函数内部在调用它本身 function add( num ){ if( num == 1 ){ return 1; } return( num - 1 ) + num console.log( add( 5 ) ); 1，如果判断num等于1，则返回值是1，判断是false则执行下面的函数的递归 2，此时num是5，5不等于...
递归生成表格数据
yaya_wiscom的专栏
10-19 593
前台缓存树节点中保存的是一组键值对，其中值是一个Map或直接就是String字符串。如果是Map的话还需要考虑Map中是否包装了List以及List中是否还会存在Map的情况。显然需要通过递归调用才能将这组数据结构全部遍历出来。   主方法中调用递归方法： //调用递归方法 String table = displayMap(node.getData(),"1"); //取得展示数...
mysql递归查询语言
08-11
### 回答1： MySQL 递归查询语言主要是通过使用 `WITH RECURSIVE` 关键字来实现的，类似于其他数据库管理系统中的 `WITH RECURSIVE` 关键字。 下面是一个使用 MySQL 递归查询语言的例子，假设我们有一个表格 `employee` 包含员工的 ID、姓名和上级 ID： ```sql CREATE TABLE `employee` ( `id` INT NOT NULL, `name` VARCHAR(45) NOT NULL, `manager_id` INT NULL, PRIMARY KEY (`id`) ); INSERT INTO `employee` (`id`, `name`, `manager_id`) VALUES (1, 'Alice', NULL), (2, 'Bob', 1), (3, 'Charlie', 2), (4, 'David', 2), (5, 'Eve', 1), (6, 'Frank', 5), (7, 'Grace', 5), (8, 'Henry', 7); ``` 现在我们想要查询每个员工的直接上级以及所有上级的姓名，可以使用递归查询语言来实现： ```sql WITH RECURSIVE cte (id, name, manager_id, level) AS ( SELECT id, name, manager_id, 0 FROM employee WHERE id = 6 -- 员工 ID UNION ALL SELECT e.id, e.name, e.manager_id, c.level + 1 FROM employee e JOIN cte c ON e.id = c.manager_id ) SELECT CONCAT(REPEAT(' ', level), name) AS name, level FROM cte ORDER BY level; ``` 这个查询语句会输出以下结果： ``` Frank 0 Eve 1 Grace 2 Henry 3 Alice 1 ``` 这个结果表示 Frank 的直接上级是 Eve，Eve 的直接上级是 Alice，而 Grace 和 Henry 是 Eve 的上级，Alice 没有上级。 ### 回答2： MySQL递归查询语言是指在MySQL数据库中使用递归查询来实现对层次结构数据的查询。递归查询可以用于处理带有父子关系的数据，例如组织机构、分类目录等。 MySQL递归查询语言的实现方式是通过使用WITH RECURSIVE子句来定义递归查询。这个子句包含两部分：递归部分和终止条件部分。递归部分定义了每一次递归查询时如何从上一次的结果中获取下一级的数据，而终止条件部分定义了递归查询何时停止。 在递归查询中，通过使用UNION操作符将递归部分和终止条件部分连接在一起。递归部分的查询语句中使用了上一次递归查询的结果作为输入，并且在结果中筛选出下一级的数据。终止条件部分的查询语句用于获取最顶层的数据。 递归查询语言的基本语法如下： ``` WITH RECURSIVE cte_name (column1, column2, ...) AS ( SELECT initial_query UNION ALL SELECT recursive_query ) SELECT * FROM cte_name; ``` 递归查询语言的应用场景很多，例如可以用来查询组织机构的层级结构、获取分类目录的嵌套关系等。通过递归查询，可以轻松地遍历和操作具有层次结构的数据。 ### 回答3： MySQL并没有专门的递归查询语言。但是可以通过使用存储过程和临时表来实现递归查询。 在MySQL中，可以通过编写存储过程来实现递归查询。存储过程是一种预先编译的SQL语句集合，可以在MySQL数据库上进行执行。在存储过程中，可以使用循环和条件语句来进行递归查询。通过逐步迭代和条件判断，可以实现对具有层级结构的数据进行递归查询。 此外，临时表也是实现递归查询的一种方法。临时表是一种临时存储数据的表，它只存在于当前会话中，并在会话结束后自动被删除。通过创建多个临时表和通过循环插入数据到临时表，可以模拟递归查询的过程。 总的来说，虽然MySQL并没有原生的递归查询语言，但是可以通过存储过程和临时表等方法来实现递归查询。递归查询在处理具有层级结构的数据时非常有用，可以实现对树形结构数据的遍历和查询。但是需要注意的是，递归查询可能会导致性能问题，所以在使用时要谨慎考虑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Irene1991

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值