将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 = 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(); });