將JSOn資料渲染進頁面表格（一）

標籤：replace   show   data   資料格式   success   text   篩選   box   this   

實現：將後台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();});

 

將JSOn資料渲染進頁面表格（一）