zoukankan      html  css  js  c++  java
  • 将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(); });
  • 相关阅读:
    【iOS】ARC & MRC
    【iOS】判断苹果的设备是哪种
    【iOS】获取项目名和版本号
    CSDN Markdown 超链接
    【iOS】安装 CocoaPods
    【Android Studio】常用快捷键
    Linux初接触设置笔记01
    Java循环输出一个菱形与阶乘倒数
    对象的声明与实例化(转)
    Java堆/栈/常量池以及String的详细详解(转)------经典易懂系统
  • 原文地址:https://www.cnblogs.com/xiaoluoli/p/5999730.html
Copyright © 2011-2022 走看看