Layui表格自定义表格字体样式

Layui表格中单元格样式可通过templet-自定义模板改变单元格内容样式：

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

templet 提供了三种使用方式，请结合实际场景选择最合适的一种：

    (1)、如果自定义模版的字符量太大，我们推荐你采用【方式一】；

    (2)、如果自定义模板的字符量适中，或者想更方便地调用外部方法，我们推荐你采用【方式二】；

    (3)、如果自定义模板的字符量很小，我们推荐你采用【方式三】

方式一：绑定模板选择器。

       <th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>

        <th lay-data="{field:'id', width:100}">ID</th>

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

<script type="text/html" id="titleTpl">

        <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>

</script>

方式二：函数转义

              table.render({

            cols: [[

                {field:'title', title: '文章标题', width: 200

                ,templet: function(d){

                return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'

                }

           }

            ,{field:'id', title:'ID', width:100}

            ]]

});

方式三：直接赋值模版字符

              templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'

 

注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

下面例子将采用方式一：绑定模板选择器来实现显示红色字体的文本，代码如下：

<table class="layui-table"

        lay-data="{

                    height: 316,

                    id: 'findRepertory',    

                    url: ${ctx}/servlet/FindRepertoryServlet?type=findRepertory&findType=findRepertoryAlarm',                          limit: 6,//每页默认显示的数量

                    limits: [6,10,20,30,50,60],

                    method: 'post', //提交方式                              

                }"

        lay-filter="findRepertoryAlarm">

        <thead>

            <tr>

                <th lay-data="{field: 'warehouseName', align: 'center', sort: true}">仓库名称</th>

                <th lay-data="{field: 'rawMaterialNum', align: 'center', sort: true}">商品编号</th>

                <th lay-data="{field: 'rawMaterialName', align: 'center', sort: true}">商品名称</th>

                <th lay-data="{field: 'unitName', align: 'center', sort: true}">单位</th>

                <th lay-data="{field: 'rawMaterialBigName', align: 'center', sort: true}">商品类别</th>

<th lay-data="{field: 'rawMaterialQuantity', align: 'center', sort: true}">当前库存</th>

<th ay-data="{field: 'titleInfo', align: 'center', sort: true, templet: '#titleInfo'}">报警库存</th>

            </tr>

        </thead>

    </table>

    <script type="text/html" id="titleInfo">

        {{#  if(d.titleInfo != ''){ }}

            <span style="color: red;">{{ d.titleInfo }}</span>

        {{#  } }}

</script>

代码执行效果如下：