适应laytpl 渲染模板数据

Posted 码农弟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了适应laytpl 渲染模板数据相关的知识,希望对你有一定的参考价值。

前言

当我们异步读取数据过来的时候,还要通过手动赋值,显示在页面上吗,那样你就太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);//异步渲染数据
        });
    }

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

以上是关于适应laytpl 渲染模板数据的主要内容,如果未能解决你的问题,请参考以下文章

laytpl模板——怎么使用ajax与数据交互

laytpl( Layui 的一款轻量 JavaScript 模板引擎)

Layui__模板引擎layui.laytpl

模板引擎文档 - layui.laytpl 介绍

微信小程序开发--模板(template)使用,数据加载,点击交互

Spring boot:thymeleaf 没有正确渲染片段