适应laytpl 渲染模板数据

Posted 2020-08-08 码农弟

前言

当我们异步读取数据过来的时候，还要通过手动赋值，显示在页面上吗，那样你就太OUT了，哥告诉你个新方式。

那就是 laytpl 插件

用法一：渲染单条数据

<table id="Box">
    <tr>
        <td>姓名</td><td>性别</td><td>班级</td><td>分数</td>
    </tr>
</table>
<input  type="button" value="添加学生分数" onclick="UseInfo1()"/>
<script type="text/html" id="box-class-tem1">
    <tr>
        <td>{{d.Name}}</td><td>{{d.Sex}}</td><td>{{d.Class}}</td><td>{{d.Core}}</td>
    </tr>
</script>

    function UseInfo1() {
        var html = $("#box-class-tem1").html(); //获取模板
        /*单条数据*/
        var ojb = {
            Name: "肚子",
            Sex: "14",
            Class: "五年级",
            Core: "99"
        };
         laytpl(html).render(ojb, function (result) {
            $("#Box").append(result);
        });
    }

　　

用法二：渲染多条数据

<table id="Box">
    <tr>
        <td>姓名</td><td>性别</td><td>班级</td><td>分数</td>
    </tr>
</table>
<input  type="button" value="批量添加学生分数" onclick="UseInfo2()"/>

<script type="text/html" id="box-class-tem2">
    {{# for(var i = 0; i < d.list.length; i++){ }}
        <tr>
            <td>{{d.list[i].Name}}</td><td>{{d.list[i].Sex}}</td><td>{{d.list[i].Class}}</td><td>{{d.list[i].Core}}</td>
        </tr>
    {{# } }}
</script>

    function UseInfo2() {
        var html = $("#box-class-tem2").html(); //获取模板
        /*多条数据*/
        var data = {
            list: [{
                    Name: "肚1",
                    Sex: "14",
                    Class: "五年级",
                    Core: "99"
                },
                {
                    Name: "肚2",
                    Sex: "14",
                    Class: "五年级",
                    Core: "99"
                }
            ]
        };
        laytpl(html).render(data, function (result) {
            $("#Box").append(result);//异步渲染数据
        });
    }

　　常用的方法应该就这两种，有不详细的地方，可以参考官方解释。谢谢