如何在javaScript中实现分层多级数据表? [英] How to implement hierarchical multilevel datatable in javaScript?

问题描述

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

<块引用>

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

解决方案

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

function renderJSON(json) {const wrapper = document.createElement('div');常量栈 = [{节点:json，名称:'根'，parentEl:包装器}];while (stack.length > 0) {让当前 = stack.pop();让 currentObj = current.node;让 currentParentEl = current.parentEl;let level = document.createElement('div');level.classList.add('level');level.textContent = current.name + ':';如果(currentObj.renderContent){//渲染自定义 html 内容currentObj.renderContent(level);} else if (!(currentObj instanceof Object)) {level.textContent += currentObj;}currentParentEl.append(level);if (currentObj instanceof Object) {让键 = Object.keys(currentObj);如果(！currentObj.skipChildren){//反向推送以保留密钥顺序for (let i = keys.length - 1; i >= 0; i--) {让键 = 键 [i];让节点 = currentObj[key];堆栈推({节点:节点，名称:钥匙，parentEl:级别});}}}}返回包装器；}//示例用例:const 权限 = 函数权限(){this.skipChildren = true;this.view = false;this.edit = false;this.delete = false;};Permissions.prototype = {渲染内容(el){const 字段 = ['查看', '编辑', '删除'];for(让字段字段){const label = document.createElement('label');label.textContent = 字段；const checkbox = document.createElement('input');checkbox.type = 'checkbox';checkbox.checked = this[field];label.appendChild(checkbox);el.appendChild(标签);}}};const 渲染 = renderJSON({元素 1:{一:4，乙:6，c: 24,元素1a:{一个:'你好'}},元素 2:{一个:'abc'，权限:新权限()},元素3:[第一"，第二"，第三"]});document.body.append(rendered);

.level {左边距:1em；}

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

I am implementing multi level datatable without using any plugin or library. I want to implement based on javaScript, JQuery or angular js. I checked one below links,

Traverse all the Nodes of a JSON Object Tree with JavaScript

nested table using ng-repeat

But my json structure is different from above link.

I need to display my JSON in Tree Structure UI. I don't hard code level in html. All level should be handle by javascript.

I have implemented jsfiddle: http://jsfiddle.net/varunPes/0n9fmawb/40/

JSON STRUCTURE

[  {
      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
            }
         }
         }

      }
   }
]

Expacted Output

You answer valuable for me. Thanks in advance.

解决方案

The simplest way I can think of accomplishing this with vanilla Javascript would be a modified depth first traversal of an object:

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;
}

There's a lot of different ways you could branch off of this code depending on your needs. Since you're given a JSON string to begin with, you'll need to find some way to convert that into a Javascript object that will produce the result you want.

这篇关于如何在javaScript中实现分层多级数据表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！