layui 表格字体_Layui表格自定义表格字体样式

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

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

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

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

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

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

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

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

文章标题ID

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

{{d.title}}

方式二：函数转义

table.render({

cols: [[

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

,templet: function(d){

return 'ID：'+ d.id +'，标题：'+d.title +''

}

}

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

]]

});

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

templet: '

{{d.title}}

'

注意：这里一定要被一层

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

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">

仓库名称商品编号商品名称单位商品类别当前库存报警库存

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

{{ d.titleInfo }}

{{# } }}

代码执行效果如下：