首页 > 代码库 > 将JSOn数据渲染进页面表格（一）

将JSOn数据渲染进页面表格（一）

2024-08-17 20:04:54   220人阅读

实现：将后台JSOn数据在页面以表格显示最后n条，折叠前面的内容。

除了处理JSOn数据比较麻烦，原理还是DOM操作，所以原生基础很重要啊。这种情况是在页面写好表头，然后再插入行，筛选。

JSOn数据格式,差不多这个格式吧，随便写的

[
   {“version”:“1.2.1”,
     "333":"44",
     "fruit":[
              {"apple":"one"},
              {"banana":"two"},
              {"grap":"three"},
              {"orange":"four"}
      ]
  }  ,
  {“version”:“1.2.3”,
     "333":"44",
     "fruit":[
              {"apple":"one"},
              {"banana":"two"},
              {"grap":"three"},
              {"orange":"four"}
      ]
  }  

]

html部分

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

js部分

$(function(){

    var getData = http://www.mamicode.com/function(){            
        $.get("data.json").success(function(data) {
            tempData = data;
            generatingTable(data);
        });
    };

    
    var generatingTable = 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=6;
        var L = data.length;
        var str = "";
　　　　　//显示最后N条
        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].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].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();
});

 

将JSOn数据渲染进页面表格（一）


联系
我们