zoukankan      html  css  js  c++  java
  • Layui:templet自定义列模板

    类型:String,默认值:

    在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某列的单元格添加链接等其它元素,你可以借助该参数来轻松实现。这是一个非常实用且强大的功能,你的表格内容会因此而丰富多样。

    templet 提供了三种使用方式,请结合实际场景选择最合适的一种:
    • 如果自定义模版的字符量太大,我们推荐你采用【方式一】;
    • 如果自定义模板的字符量适中,或者想更方便地调用外部方法,我们推荐你采用【方式二】;
    • 如果自定义模板的字符量很小,我们推荐你采用【方式三】

    方式一:绑定模版选择器。

    table.render({
    cols: [[
    {field:'title', title: '文章标题',  200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
    ,{field:'id', title:'ID', 100}
    ]]
    });
    等价于:
    <th lay-data="{field:'title',  200, templet: '#titleTpl'}">文章标题</th>
    <th lay-data="{field:'id', 100}">ID</th>

    下述是templet对应的模板,它可以存放在页面的任意位置。模板遵循于 laytpl 语法,可读取到返回的所有数据

    <script type="text/html" id="titleTpl">
    <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
    </script>
    注意:上述的 {{d.id}}、{{d.title}} 是动态内容,它对应数据接口返回的字段名。除此之外,你还可以读取到以下额外字段:
    序号:{{ d.LAY_INDEX }} (该额外字段为 layui 2.2.0 新增)
    由于模板遵循 laytpl 语法(建议细读 laytpl文档 ),因此在模板中你可以写任意脚本语句(如 if else/for等):
    <script type="text/html" id="titleTpl">
    {{# if(d.id < 100){ }}
    <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
    {{# } else { }}
    {{d.title}}(普通用户)
    {{# } }}
    </script>

    方式二:函数转义。自 layui 2.2.5 开始,templet 开始支持函数形式,函数返回一个参数 d,包含接口返回的所有字段和数据。如下所示:

    table.render({
    cols: [[
    {field:'title', title: '文章标题',  200
    ,templet: function(d){
    return 'ID:'+ d.id +',标题:<span style="color: #c00;">'+ d.title +'</span>'
    }
    }
    ,{field:'id', title:'ID', 100}
    ]]
    });

    方式三:直接赋值模版字符。事实上,templet 也可以直接是一段 html 内容,如:

    templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
    注意:这里一定要被一层 <div></div> 包裹,否则无法读取到模板
  • 相关阅读:
    字符缓冲流,properties类,序列化流与反序列化流,打印流
    字节输入输出流,字符输入输出流,转换流,字节缓冲流
    ListFiles(),文件过滤器与递归
    File
    Beta冲刺第二周王者荣耀交流协会第三次会议
    第九周PSP
    Beta周王者荣耀交流协会第六次会议
    第八周PSP
    王者荣耀交流协会-小组互评Alpha版本
    小组互评Alpha版本
  • 原文地址:https://www.cnblogs.com/xxzb/p/12664713.html
Copyright © 2011-2022 走看看