juicer.js 使用示例

来源：互联网发布：python scrapy 教程编辑：程序博客网时间：2024/05/21 09:22

<!DOCTYPE html>
<html lang="en-US">
   <head>
       <title>测试</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script type="text/javascript" src="../../javascript/jquery.js"></script>
       <script type="text/javascript" src="../../javascript/juicer-min.js"></script>
       <script type="text/javascript" src="../../javascript/jquery.json-2.3.js"></script>

       <style type="text/css">
           table {
               border-top: 1px solid #999;
               border-left: 1px solid #999;
               border-spacing: 0;
           }
           tr td {
               border-bottom: 1px solid #999;
               border-right: 1px solid #999;
               padding: 10px 30px;
           }
       </style>

       <script type="text/javascript">
           function renderToHtml(data){
               var tpl = document.getElementById('tp1').innerHTML;
               var html = juicer(tpl, data);
               //alert(html);
               jQuery("#content").html(html);
           }

           window.onload=function(){
              var indexOf = function getValueByIndex(arr,index){
                   if(arr.length<parseInt(index)+1){
                       return "null";
                   }else{
                       return arr[index];
                    }
                }
               juicer.register('indexOf', indexOf);
               write();
           }

           function read(){
               var sj=localStorage.getItem("data");
               //alert(data);
               var data = $.parseJSON(sj);
               renderToHtml(data);
           }

           function write(){
               localStorage.clear();
               var xslb=new Array();
               var xs1=new Object();
               xs1.no=1;
               xs1.name="高富帅";
               xs1.age=19;

               xslb.push(xs1)
               var cj=new Array();
               var yw=new Object();
               yw.no=1;
               yw.name="语文";
               yw.score=88;

               cj.push(yw);
               var sx=new Object();
               sx.no=3;
               sx.name="数学";
               sx.score=99;
               cj.push(sx);
               var xs2=new Object();
               xs2.no=2;
               xs2.name="白富美";
               xs2.age=16;
               xs2.cj=cj;
               xslb.push(xs2)

               var xx=new Object();
               xx.name="北京大学";
               xx.address="北京市朝阳区";
               var data=new Object();
               var cs=new Array();
               cs.push("1");
               cs.push("2");
               cs.push("3");
               data.xslb=xslb;
               data.xx=xx;
               data.cs=cs;
               data.total=20;
               var sj = $.toJSON(data);
               //alert(sj);
               localStorage.setItem("data",sj);
               renderToHtml(data);
           }
       </script>

       <script id="tp1" type="text/template">
           <table>
               <tr><td colspan=2>学校人数:${total}  学校名称: ${xx.name}</td></tr>
               {@each cs as it,index}
                   <tr><td>-----------------------------</td><td>${cs, index | indexOf}</td></tr>
               {@/each}

               {@each xslb as it,index}
                   <tr > <td>学号</td><td> ${it.no}</td></tr>
                   <tr > <td>姓名</td><td>${it.name}</td></tr>
                   <tr > <td>年龄</td><td> ${it.age}</td></tr>
                   <tr > <td>成绩</td><td>
                   {@each it.cj as it2,index}
                       行号:${index}<br><hr>
                       名次:${it2.no}<br><hr>
                       姓名:${it2.name}<br><hr>
                       成绩:${it2.score}<br>
                       算术运算:${+it2.score/100}<br>
                       索引为字符串:${index+1}<br>
                       索引为数字:${+index+1}<br>
                   {@/each}
                   </td>
                   </div>
               {@/each}
           <table>
       </script>
   </head>

   <body>
       <div id="content"></div>
       <input type="button" onclick="read();" value="读取"></input>
       </div>
   </body>
</html>

0 0

juicer.js 使用 示例

juicer.js 使用示例