首页 > 其他分享 >获取tree跨行跨列

获取tree跨行跨列

时间:2023-03-26 22:34:43浏览次数:30  
标签:跨行 align tree 跨列 prop L3 测试 label children

 

 

获取tree跨行跨列
 function getColspan (column) {
  let colspan = 0
  const children = column.children || []
  for (let i = 0; i < children.length; i++) {
    const item = children[i]
    if (item.children && item.children.length > 0) {
      colspan += getColspan(item)
    } else {
      colspan += 1
    }
  }
  if (colspan == 0) {
    colspan = 1
  }
  return colspan
}

// 获取跨列
function getRowspan (column, maxLevel) {
  let rowspan = 1
  if (!column.children || column.children.length == 0) {
    rowspan = maxLevel - column.level + 1
  }
  return rowspan
}

function getMaxFloor (columns) {
  let max = 0
  const deepEach = function (column, floor) {
    if (floor > max) {
      max = floor
    }
    const children = column.children
    if (children && children.length) {
      children.forEach(child => {
        deepEach(child, floor + 1)
      })
    }
  }

  columns.forEach(column => {
    deepEach(column, 0)
  })

  return max
}

const colmuns = [
  {
    label: '测试L1',
    prop: '测试L1',
    width: 200,
    align: 'left',
    showOverflowTooltip: true
  },
  {
    label: '测试L2',
    prop: '测试L2',
    width: 200,
    align: 'left',
    showOverflowTooltip: true
  },
  {
    label: '测试L3',
    prop: 'cod',
    align: 'center',
    children: [
      {
        label: '测试L3-2-1',
        prop: '测试L3-2',
        width: 150,
        align: 'center',
        children: [
          {
            label: '测试L3-2-1',
            prop: '测试L3-2',
            width: 150,
            align: 'center'
          },
          {
            label: '测试L3-2-2',
            prop: '测试L3-2-2',
            width: 150,
            align: 'center'
          }
        ]
      },
      {
        label: '测试L3-2-2',
        prop: '测试L3-2-2',
        width: 150,
        align: 'center',
        children: [
          {
            label: '测试L3-2-1',
            prop: '测试L3-2',
            width: 150,
            align: 'center'
          },
          {
            label: '测试L3-2-2',
            prop: '测试L3-2-2',
            width: 150,
            align: 'center'
          },
          {
            label: '测试L3-2-2',
            prop: '测试L3-2-2',
            width: 150,
            align: 'center',
            children: [

              {
                label: '测试L3-2-2',
                prop: '测试L3-2-2',
                width: 150,
                align: 'center'
              }
            ]
          }
        ]
      }
    ]
  },
  {
    label: '测试L4',
    prop: '测试L4',
    align: 'center',
    children: [
      {
        label: '测试L4-1',
        prop: '测试L4-1',
        width: 150,
        align: 'center',
        children: [
          {
            label: '测试L4-1-1',
            prop: '测试L4-1-1',
            width: 150,
            align: 'center',
            children: [
              {
                label: '测试L4-1-1-1',
                prop: '测试L4-1-1-1',
                width: 150,
                align: 'center',
                children: [

                  {
                    label: '测试L3-2-2',
                    prop: '测试L3-2-2',
                    width: 150,
                    align: 'center'
                  }
                ]
              }
            ]
          }
        ]
      }

    ]
  }
]

const maxLevel = getMaxFloor(colmuns)

 

标签:跨行,align,tree,跨列,prop,L3,测试,label,children
From: https://www.cnblogs.com/yeminglong/p/17259781.html

相关文章

  • 平衡二叉树 -(avltree)
    AVL树简介AVL树的名字来源于发明作者G.M.Adelson-Velsky和E.M. Landis的缩写。AVL树是最先发明的自平衡二叉查找树(Self-BalancingBinarySearchTree,简称平衡二叉树......
  • bzoj 2631 tree
    2631:treeTimeLimit: 30Sec  MemoryLimit: 128MBSubmit: 4429  Solved: 1488[Submit][Status][Discuss]Description一棵n个点的树,每个点的初始......
  • Binary Tree Traversals
    BinaryTreeTraversalsTimeLimit:1000/1000MS(Java/Others)    MemoryLimit:32768/32768K(Java/Others)TotalSubmission(s):9623    AcceptedSubmissio......
  • 【hdu6547】Tree(树链剖分, 线段树区间根号)
    problemalgorihtm1、树链剖分什么是树链剖分(重链剖分)?树链,就是树上的路径。剖分,就是把路径分类为重链和轻链。对于树上的一个点,与其相连的边中,连向的节点子树大小最大(重儿子)......
  • segment_tree
    这是一棵一棵一棵线段树众所周知,线段树是一个优质的维护区间信息(需要满足结合律)的数据结构我们可以\(O(nlogn)\)建树\(O(logn)\)查询任意区间的信息关于结合......
  • Segment Tree Beats! 初步和其他
    不会渐进表示,全无脑用\(\Theta\)了/kk目录区间最值问题不含区间加减的情况划分数域历史最值问题双半群模型问题描述使用标记维护的问题区间最值问题不含区间加减的......
  • Debunking Rumors on Twitter with Tree Transformer
    Article:l 论文标题:DebunkingRumorsonTwitterwithTreeTransformer(利用树状Transformer模型揭露Twitter中的谣言)l 论文作者:JingMa、WeiGaol 论文来源:2020......
  • Mysql B-Tree与B+Tree区别
    一、B-Tree与B+Tree介绍B-TreeB-Tree是一种平衡树,用于支持快速的查找、插入和删除操作。B-Tree通常被用作关系数据库管理系统(RDBMS)的索引结构,因为它能够在大数据集合中......
  • POJ - 3321 Apple Tree
    原题链接思路答案不好直接维护,所以,我们可以采用DFS序来解决这一问题。设\(l_u\)是以\(u\)为根的子树中最小的时间戳,\(r_u\)是以\(u\)为根的子树中最大的时间戳......
  • 题解 ABC294G【Distance Queries on a Tree】
    DFS序树状数组。不妨以\(1\)为根,设\(\operatorname{dep}(u)\)表示\(u\)到根路径的边权和,\(\operatorname{dis}(u,v)\)表示\(u,v\)间路径的边权和,\(\operatornam......