layui表格渲染templet解析单元格

templet遍历方法

先贴上数据格式

{
    "msg": "",
    "code": 0,
    "data": [
        {
            "id": 1,
            "name": "2013级",
            "courses": [
                {
                    "id": 1,
                    "name": "语文"
                },
                {
                    "id": 2,
                    "name": "数学"
                },
                {
                    "id": 3,
                    "name": "英语"
                },
                {
                    "id": 4,
                    "name": "物理"
                },
                {
                    "id": 5,
                    "name": "化学"
                }
            ]
        },
        {
            "id": 2,
            "name": "2014级",
            "courses": [
                {
                    "id": 10,
                    "name": "体育"
                },
                {
                    "id": 9,
                    "name": "计算机"
                },
                {
                    "id": 8,
                    "name": "政治"
                },
                {
                    "id": 1,
                    "name": "语文"
                }
            ]
        },
        {
            "id": 3,
            "name": "2015级",
            "courses": [
                {
                    "id": 2,
                    "name": "数学"
                }
            ]
        }
    ],
    "count": 3
}

初始化表格解析数据并展示

      <table id="student"  lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
      <script>
    //初始化表格
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
             elem: '#student'
            ,height: 480
            ,url: 'list.action' //数据接口
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '年级名称', width:150,sort: true}
                ,{field: 'courses', title: '年级课程', width: 450,templet: '#course'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,skin: 'row' //表格风格
            ,even: true //隔行背景
            ,page: true //是否显示分页
        });
    });
 
<script type="text/html" id="course">
        【
        {{#  layui.each(d.courses, function(index, item){ }}
           |  {{item.name}}
            {{#  });
        }} |
        】
</script>

展示效果  

image

  layui官方文档:https://www.layui.com/demo/laytpl.html

最后修改:2019 年 10 月 27 日 04 : 50 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

3 条评论

  1. 马巍

    真不错啊

  2. 马巍

    OωO挺好的

  3. 马巍

    挺好呐 博客做的