• 遍历json创建树状表(首先的前提条件是要引入jquery的jquery treeTable插件)


       "root":{
            "children":[
                {
                    "name":"AA",
                    "children":[
                        {
                            "nam1":"AA1",
                            "children":[
                                {
                                    "name":"AAA1",
                                    "children":[{
                                        "name":"xsA",
                                        "children":"",
                                        "parameter":{"name":"xsA","OT":18,"NT":12}
                                    }],
                                    "parameter":{"name":"AAA1","OT":1800,"NT":12000}
                                },
                                {
                                    "name":"AAA2",
                                    "children":"",
                                    "parameter":{"name":"AAA2","OT":1100,"NT":1400}
                                },
                                {
                                    "name":"AAA3",
                                    "children":"",
                                    "parameter":{"name":"AAA3","OT":100,"NT":700}
                                }
                            ],
                            "parameter":{"name":"AA1","OT":3000,"NT":1389}
                        },
                        {
                            "name":"AA2",
                            "children":[
                                {
                                    "name":"AA2A",
                                    "children":"",
                                    "parameter":{"name":"AA2A","OT":1800,"NT":12000}
                                },
                                {
                                    "name":"AA2B",
                                    "children":"",
                                    "parameter":{"name":"AA2B","OT":1100,"NT":1400}
                                }
                            ],
                            "parameter":{"name":"AA2","OT":3000,"NT":1389}
                        }
                    ],
                    "parameter":{"name":"AA","OT":1000,"NT":400}
                },
                {
                    "name":"BB",
                    "children":[
                        {
                            "name":"BB1",
                            "children":[
                                {
                                    "name":"BBB1",
                                    "children":"",
                                    "parameter":{"name":"BBB1","OT":1800,"NT":12000}
                                },
                                {
                                    "name":"BBB2",
                                    "children":"",
                                    "parameter":{"name":"BBB2","OT":1100,"NT":1400}
                                },
                                {
                                    "name":"BBB3",
                                    "children":"",
                                    "parameter":{"name":"BBB3","OT":100,"NT":700}
                                }
                            ],
                            "parameter":{"name":"BB1","OT":3000,"NT":1389}
                        },
                        {
                            "name":"BB2",
                            "children":[
                                {
                                    "name":"BB2A",
                                    "children":"",
                                    "parameter":{"name":"BB2A","OT":1800,"NT":12000}
                                },
                                {
                                    "name":"BB2B",
                                    "children":"",
                                    "parameter":{"name":"BB2B","OT":1100,"NT":1400}
                                }
                            ],
                            "parameter":{"name":"BB2","OT":3000,"NT":1389}
                        }
                    ],
                    "parameter":{"name":"BB","OT":20,"NT":8000}
                },
                {
                    "name":"CC",
                    "children":"",
                    "parameter":{"name":"CC","OT":500,"NT":2}
                }
            ]
        }

    js代码

     $(function(){
            var treeTR,JsonOBJ,arrColumn,cloum,cc;
                $.getJSON("html/template/template.json", function(msg){
                    //msg:root获取所有的数据
                    JsonOBJ=msg.root.children;
                    arrColumn=msg.Column;
                    //创建TH
                    treeTR+="<tr>";
                    for(var t=0;t<arrColumn.length;t++){
                        treeTR +="<th>" +arrColumn[t]+ "</th>";
                    }
                    treeTR+="</tr>";
                   //创建底层节点s
                    for(var i=0;i< JsonOBJ.length;i++){
                        treeTR += "<tr  data-tt-id='"+i+"'>" ;
                        for(var k=0;k<arrColumn.length;k++){
                            cloum=arrColumn[k];
                            treeTR +="<td>" +JsonOBJ[i].parameter[cloum]+ "</td>";
                        }
                        treeTR += "</tr>";
                         cc= i;
                        tree(JsonOBJ[i].children,cc);
                    }
                    //example-advanced 为table的ID
                    $("#example-advanced").append(treeTR);
                    $("#example-advanced").treetable({ expandable: true });
                });
            }
            //加载树的子节点
            function tree(w,bb){
                for(var j=0;j< w.length;j++){
                    treeTR += "<tr data-tt-id='"+bb+'-'+j+"' data-tt-parent-id='"+bb+"'>" ;
                    for(var m=0;m<arrColumn.length;m++){
                        cloum=arrColumn[m];
                        treeTR += "<td>" +w[j].parameter[cloum]+ "</td>";
                    }
                    treeTR += "</tr>";
                    if(jQuery.isArray(w[j].children)){
                        cc=bb+"-"+j;
                   //递归遍历所有的子节点
                        tree(w[j].children,cc);
                    }
                }
        });

    上图:有图有真相嘛,俗话所得好:

    搞定晒!

  • 相关阅读:
    VSCode显示多个Tab窗口
    react + antd实现动态菜单
    vue 全局插件封装--提示toast
    ElementUI之el-scrollbar+el-select组合
    vue 滚动条组件对比
    【智能车】NXP_MIMXRT1064库函数
    【模电学习】二极管的特性与参数
    【模电学习】半导体——N与P(2)
    【协议】IIC通信
    【模电学习】半导体——N与P(1)
  • 原文地址:https://www.cnblogs.com/dangou/p/6025485.html
Copyright © 2020-2023  润新知