juicer.js 使用 示例

<!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>

IT文库 » juicer.js 使用 示例
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址