如何实现分层多级数据表在JavaScript?如何实现分层多级数据表在JavaScript?(How

2019-05-12 10:48发布

我采取多层次的数据表,而无需使用任何插件或库。 我想基于JavaScript,JQuery的或有棱角的js来实现。 我查了一个链接如下,

遍历使用JavaScript JSON对象树的所有节点

采用NG-重复嵌套表

但我的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
            }
         }
         }

      }
   }
]

Expacted输出

你回答对我来说是有价值的。 提前致谢。

文章来源: How to implement hierarchical multilevel datatable in javaScript?