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

将JSOn数据渲染进页面表格(一)

实现:将后台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数据渲染进页面表格(一)