数据处理分析对比器 上

实现json数据读取，选择任意数据个数  对选择数据的属性值进行分类和比对，这里存在一个二维表格生成问题，横向纵向都是变量。

今天先把数据读取的首页分析一下,要求 显示指定倒数任意条数据；

json格式，（太长只贴了一个）：

[
    {
        "cloudosclient_version": "1.1.2.18",
        "hardware_version": 1,
        "aaa":1111,
        "case_list": 
        [
            
            {
                "test_create_network_count_100": {
                    "Unknown":""
                }
            }, 
            {
                "test_create_network_multiprocess_2": {
                    "create api using": "not calculate the time at present",
                    "create status ok using": " [0.11294698715209961, 0.09060192108154297]"
                }
            }, 
            {
                "test_create_networks_count_100": {
                    "create api using": " 2.50476789474",
                    "create status ok using": " 2.54631900787"
                }
            }, 
            {
                "test_delete_network": {
                    "create api using": " 0.0966191291809",
                    "create status ok using": " 0.120776176453"
                }
            }, 
            {
                "test_list_networks": {
                    "create api using": " 0.0411069393158",
                    "create status ok using": " 0.0411081314087"
                }
            }, 
            {
                "test_list_networks_count_100": {
                    "create api using": " 2.83961796761",
                    "create status ok using": " 2.83961987495"
                }
            }, 
            {
                "test_list_networks_multiprocess_2": {
                    "create api using": "not calculate the time at present",
                    "create status ok using": " [0.039968013763427734, 0.047818899154663086]"
                }
            }, 
            {
                "test_update_network": {
                    "create api using": " 0.109448194504",
                    "create status ok using": " 0.136639118195"
                }
            }, 
            {
                "test_update_network_100": {
                    "create api using": " 0.110195159912",
                    "create status ok using": " 0.137581110001"
                }
            }, 
            {
                "test_update_network_multiprocess_2": {
                    "create api using": "not calculate the time at present",
                    "create status ok using": " [0.22078490257263184, 0.3115229606628418]"
                }
            }, 
            {
                "test_create_port": {
                    "create api using": " 0.242933988571",
                    "create status ok using": " 0.270382165909"
                }
            }, 
            {
                "test_create_port_count_100": {
                    "create api using": " 14.6591770649",
                    "create status ok using": " 14.6875970364"
                }
            }, 
            {
                "test_create_port_multiprocess_2": {
                    "create api using": "not calculate the time at present",
                    "create status ok using": " [0.21182489395141602, 0.17479801177978516]"
                }
            }, 
            {
                "test_create_ports_count_100": {
                    "create api using": " 11.0867879391",
                    "create status ok using": " 11.1126909256"
                }
            }, 
            {
                "test_delete_port": {
                    "create api using": " 0.13675403595",
                    "create status ok using": " 0.161575078964"
                }
            }, 
            {
                "test_list_ports": {
                    "create api using": " 0.0314691066742",
                    "create status ok using": " 0.0314710140228"
                }
            }, 
            {
                "test_list_ports_count_100": {
                    "create api using": " 2.53514695168",
                    "create status ok using": " 2.53514885902"
                }
            }, 
            {
                "test_list_ports_multiprocess_2": {
                    "create api using": "not calculate the time at present",
                    "create status ok using": " [0.0378720760345459, 0.035722970962524414]"
                }
            }, 
            {
                "test_update_port": {
                    "create api using": " 0.118579149246",
                    "create status ok using": " 0.150130033493"
                }
            }, 
            {
                "test_update_port_100": {
                    "create api using": " 0.106372117996",
                    "create status ok using": " 0.228691101074"
                }
            }, 
            {
                "test_update_port_multiprocess_2": {
                    "create api using": "not calculate the time at present",
                    "create status ok using": " [0.14560794830322266, 0.20780491828918457]"
                }
            }, 
            {
                "test_create_subnet": {
                    "create api using": " 0.120944023132",
                    "create status ok using": " 0.157263994217"
                }
            }, 
            {
                "test_create_subnet_count_100": {
                    "create api using": " 14.9049408436",
                    "create status ok using": " 14.9497630596"
                }
            }, 
            {
                "test_create_subnet_multiprocess_2": {
                    "create api using": "not calculate the time at present",
                    "create status ok using": " [0.1660001277923584, 0.15243911743164062]"
                }
            }, 
            {
                "test_create_subnets_count_100": {
                    "create api using": " 12.3788731098",
                    "create status ok using": " 12.4245300293"
                }
            }, 
            {
                "test_delete_subnet": {
                    "create api using": " 0.115998983383",
                    "create status ok using": " 0.140671014786"
                }
            }, 
            {
                "test_list_subnets": {
                    "create api using": " 0.0352420806885",
                    "create status ok using": " 0.0352439880371"
                }
            }, 
            {
                "test_list_subnets_count_100": {
                    "create api using": " 2.5920791626",
                    "create status ok using": " 2.59208512306"
                }
            },
            {
                "test_list_subnets_multiprocess_2": {
                    "create api using": "not calculate the time at present",
                    "create status ok using": " [0.05816984176635742, 0.05674409866333008]"
                }
            }, 
            {
                "test_update_network_100": {
                    "create api using": " 0.146998167038",
                    "create status ok using": " 0.178594112396"
                }
            }, 
            {
                "test_update_network_multiprocess_2": {
                    "create api using": "not calculate the time at present",
                    "create status ok using": " [0.22200298309326172, 0.18028998374938965]"
                }
            }, 
            {
                "test_update_subnet": {
                    "create api using": " 0.131623029709",
                    "create status ok using": " 0.164716005325"
                }
            }
        ],
        "key": "1.1.1"
    },
　　....
　　....

]

HTML ，代码尽量简洁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="css/bootstrap-3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="css/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body class="container-fluid">
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <div class="main">
                <div class="title">Result</div>
                
                <div class="middle">
                    <div class="datalist">
                        <table class="table" id="dataList">
                            <colgroup>
                                <col width="5">
                                <col width="10%"/>
                                <col width="40%">
                                <col width="40%"/>
                            </colgroup>
                            <tr id="thead">
                                <th><input type="checkbox"></th>
                                 <th>NO</th>
                                 <th>KeyName</th>
                                 <th>Imformation</th>
                            </tr>
                            <tr id="open">
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                            </tr> 
                        </table>
                    </div>
                    <div class="btx">
                        <button class="btn btn-info" id="checkAll" data-flag="false">查看全部</button>
                        <button class="btn btn-info" id="compare">开始比较</button>
                    </div>
                    
                </div>
            </div>
            
        </div>
        <div class="col-lg-3"></div>
    </div>
    
</body>
</html>

js文件

$(function(){
    //获取数据
    var getData = function(){            
        $.get("data.json").success(function(data) {
            tempData = data;
            generatingTableVersion(data);
        });
    };
    //比较
    $("#compare").click(function(){
        var arr=[];
        var num=0;
        $('#dataList input[type=checkbox]').each(function(){
            if($(this).prop('checked')==true){
                num=$(this).parent().next().text();
                var obj=tempData[num-1];
                obj.index=num-1;
                arr.push(obj);                    
            }
        });
        //generatingData(arr);
        
        console.log(22222,arr);
        arr=JSON.stringify(arr); //将数组对象

        //跳转判断
        window.localStorage.setItem("compareArr",arr);
        if(!arr.length==0){
            window.location.href="test.html";
        }            
    });

    //生成表格
    var generatingTableVersion = function(data){
        var trStr = "<tr ><td><input type='checkbox'></td><td class='number'>{number}</td><td>{keyname}</td><td class='infomation'>{values}</td></tr>";
        var count=0;
        var n=7;//指定显示的数据个数
        var L = data.length;
        var str = "";
        if((L<=n)==true){
            for(var i=0;i<L;i++){
                str=trStr.replace("{number}",i+1);
                str=str.replace("{keyname}",data[i].key);
                str=str.replace("{values}",data[i].cloudosclient_version);
                $("#dataList").append(str);
            }
            $("#open").hide();
        }
        else{
            for (var i = L-n; i<L;i++) {
                str=trStr.replace("{number}",i+1);
                str=str.replace("{keyname}",data[i].key);
                str=str.replace("{values}",data[i].cloudosclient_version);
                $("#dataList").append(str);
            };    
        }
        //折叠开关全部内容
        $("#checkAll").click(function(){
            if($(this).attr('data-flag')=='false'){
                if((L<=n)==true){
                    return;
                }        
                for(var i=0;i< L-n;i++){
                    str=trStr.replace("{number}",i+1);
                    str=str.replace("{keyname}",data[i].key);
                    str=str.replace("{values}",data[i].cloudosclient_version);
                    $("#open").before(str);    
                }
                $("#open").hide();
                $(this).text('部分显示');
                $(this).attr('data-flag',true);            
            }else if($(this).attr('data-flag')=='true'){
                $('#thead').nextUntil('#open').remove();
                $("#open").show();
                $(this).text('显示全部');
                $(this).attr('data-flag',false);    
            }
        });
    };

    getData();
});

最终界面是这样，样式也是自己设计开心就好：