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>

代码执行效果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值