如何在javascript中实现分层多级数据表？

Posted 2023-05-07

【中文标题】如何在javascript中实现分层多级数据表？

【英文标题】：How to implement hierarchical multilevel datatable in javaScript?

【发布时间】：2019-02-01 23:40:40

【问题描述】：

我在不使用任何插件或库的情况下实现多级数据表。我想基于 javascript、JQuery 或 angular js 来实现。我检查了以下链接，

Traverse all the Nodes of a JSON Object Tree with JavaScript

nested table using ng-repeat

但我的 json 结构与上面的链接不同。

我需要在树结构 UI 中显示我的 JSON。我没有在 html 中硬编码级别。所有级别都应由javascript处理。

我已经实现了jsfiddle：http://jsfiddle.net/varunPes/0n9fmawb/40/

JSON 结构

[  
      Home:
                "checkbox_view":true,
                "checkbox_edit":false,
                "checkbox_delete":true
      
   ,
     
      "watchColorWorld":  
         "local":  
            "app-local-black":
             "checkbox_view":true,
             "checkbox_edit":true,
             "checkbox_delete":true
            

         ,
         "global":  
           "app-global-red":            
             "checkbox_view":true,
             "checkbox_edit":true,
             "checkbox_delete":true
            

         ,
         "world":  
            "app-world-green":
             "checkbox_view":true,
             "checkbox_edit":true,
             "checkbox_delete":true
            
         
      
   ,
     
      "systemMgmt":  
            "checkbox_view":true,
             "checkbox_edit":true,
             "checkbox_delete":true
      
   ,
     
      "rules":  
         "Rule1":  
            "rule2":
              "rule3":  
                   "checkbox_view":true,
                   "checkbox_edit":true,
                   "checkbox_delete":true
            
         
         

      
   
]

预期输出

你的回答对我很有价值。提前致谢。

【问题讨论】：

您的问题不是很清楚，您需要在 Tree Structure UI 中显示您的 JSON 吗？

@HyyanAboFakher 感谢您的评论。是的，我必须在 UI 中的树结构中显示我的 json。

那么也许你可以试试this component

@HyyanAboFakher 感谢您的良好沟通。我不想使用任何外部大库。

this 之类的内容可能会有所帮助。

【参考方案1】：

我能想到的使用 vanilla Javascript 完成此任务的最简单方法是修改对象的深度优先遍历：

function renderJSON(json) 
  const wrapper = document.createElement('div');

  const stack = [
    node: json,
    name: 'root',
    parentEl: wrapper
  ];

  while (stack.length > 0) 
    let current = stack.pop();
    let currentObj = current.node;
    let currentParentEl = current.parentEl;

    let level = document.createElement('div');

    level.classList.add('level');
    level.textContent = current.name + ': ';

    if (currentObj.renderContent) 
      // render custom html content
      currentObj.renderContent(level);
     else if (!(currentObj instanceof Object)) 
      level.textContent += currentObj;
    

    currentParentEl.append(level);

    if (currentObj instanceof Object) 
      let keys = Object.keys(currentObj);

      if (!currentObj.skipChildren) 
        // push in reverse to preserve key order
        for (let i = keys.length - 1; i >= 0; i--) 
          let key = keys[i];
          let node = currentObj[key];

          stack.push(
            node: node,
            name: key,
            parentEl: level
          );
        
      
    
  

  return wrapper;


// Example Use Case:
const Permissions = function Permissions() 
  this.skipChildren = true;
  this.view = false;
  this.edit = false;
  this.delete = false;
;
Permissions.prototype = 
  renderContent(el) 
    const fields = ['view', 'edit', 'delete'];

    for (let field of fields) 
      const label = document.createElement('label');
      label.textContent = field;

      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.checked = this[field];

      label.appendChild(checkbox);
      el.appendChild(label);
    
  
;

const rendered = renderJSON(
  element1: 
    a: 4,
    b: 6,
    c: 24,
    element1a: 
      a: 'hello'
    
  ,
  element2: 
    a: 'abc',
    permissions: new Permissions()
  ,
  element3: ["first", "second", "third"]
);

document.body.append(rendered);

.level 
  margin-left: 1em;

根据您的需要，您可以通过多种不同的方式将此代码分支出来。由于您首先获得了一个 JSON 字符串，因此您需要找到某种方法将其转换为 Javascript 对象，从而产生您想要的结果。