handlebars获取json数据（集合对象）及各种自定义helper数据格式化工具

来源：互联网发布：unity3d 改变模型大小编辑：程序博客网时间：2024/05/04 05:34

    @RequestMapping("testDemo02.do")    public List<Emp> testDemo02(){        List<Emp> emps = new ArrayList<Emp>();        emps.add(new Emp(1111, "老龚", 33, "1", 1000.00, new Date(), new Timestamp(System.currentTimeMillis())));        emps.add(new Emp(1111, "老李", 30, "0", 1600.00, new Date(), new Timestamp(System.currentTimeMillis())));        emps.add(new Emp(1111, "老罗", 23, "2", 3000.00, new Date(), new Timestamp(System.currentTimeMillis())));        emps.add(new Emp(1111, "老王", 28, "1", 1900.00, new Date(), new Timestamp(System.currentTimeMillis())));        return emps;    }

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><table width="50%">    <thead>        <tr>            <th>NO.</th>            <th>ID</th>            <th>NAME</th>            <th>AGE</th>            <th>GENDER</th>            <th>SALARY</th>            <th>BIRTHDAY</th>            <th>HIREDATE</th>        </tr>    </thead>    <tbody id="demo">    </tbody></table><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/handlebars-4.0.10.min.js"></script><!-- 定义handlebars模板 --><!-- 注意这里的@index的使用  myCount 是调用自定义的helper工具实现在index值基础上+1操作myFormatGender 调用自定义helper工具实现数据值的格式化显示myFormatSalary  调用自定义helper工具实现数据值的格式化显示myFormatDate 调用自定义helper工具实现数据值的格式化显示myFormatTimestamp 调用自定义helper工具实现数据值的格式化显示 --><script type="text/x-handlebars-template" id="demo_ht">    {{#each this}}        <tr>            <td>{{myCount @index}}</td>            <td>{{id}}</td>            <td>{{name}}</td>            <td>{{myFormatGender gender}}</td>            <td>{{age}}</td>            <td>{{myFormatSalary salary}}</td>            <td>{{myFormatDate birthday}}</td>            <td>{{myFormatTimestamp hiredate}}</td>        </tr>    {{/each}}</script><script type="text/javascript">    $(function(){        $.ajax({            type:"post",            url:"test/testDemo02.do",            dataType:"json",            success:function(data){                //编译模板                var demo_ht = Handlebars.compile($("#demo_ht").html());                //定义一个helper 实现在index基础上从1开始                Handlebars.registerHelper("myCount" , function(index){                    return index + 1 ;                });                /*                 myGenderRadio 实在调用自定义的helper工具实现 1转成“男” 0转成“女”                {{#myGenderRadio gender}}                    <td>男</td>                {{else}}                    <td>女</td>                {{/myGenderRadio}}                //定义个helper，实现将性别的0 转换成成女 1转换成男                Handlebars.registerHelper("myGenderRadio" , function(val , options){                    if(val === "1" ){                        return options.fn(this); //成立执行第一个情况                    }else{                        return options.inverse(this); //不成立执行第二个情况                    }                });                */                //定义个helper，实现将性别的0 转换成成女 1转换成男 2转换为保密                Handlebars.registerHelper("myFormatGender" , function(val){                    if(val === "1" ){                        return "男" ;                    }else if(val === "0"){                        return "女" ;                    }else{                        return "-" ;                    }                });                //定义个helper，实现将工资格式化                Handlebars.registerHelper("myFormatSalary" , function(val){                    return val + ".00"                });                //定义个helper，实现日期格式转换                Handlebars.registerHelper("myFormatDate" , function(v){                    var date = new Date(v);                    var m = date.getMonth()+1 ;                    if(m<10){                        m = "0" + m ;                    }                    var d = date.getDay() ;                    if(d<10){                        d = "0" + d ;                    }                    return date.getFullYear() + "年" + m + "月" + d + "日" ;                });                //定义个helper，实现Timestamp日期格式转换                Handlebars.registerHelper("myFormatTimestamp" , function(v){                        var date = new Date(v);                        var m = date.getMonth()+1 ;                        if(m<10){                            m = "0" + m ;                        }                        var d = date.getDay() ;                        if(d<10){                            d = "0" + d ;                        }                        var h = date.getHours() ;                        if(h<10){                            h = "0" + h ;                        }                        var mm = date.getMinutes() ;                        if(mm<10){                            mm = "0" + mm ;                        }                        var s = date.getSeconds() ;                        if(s<10){                            s = "0" + s ;                        }                        return date.getFullYear() + "年" + m + "月" + d + "日 " + h + "时" + mm + "分" + s + "秒"  ;                    });                //模板渲染数据                var _html = demo_ht(data);                //dom操作                $("#demo").html(_html);            },            error:function(){                alert("请求发生异常!");            }        });    });</script></body></html>

阅读全文

0 0