700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > layui 表格字体_Layui表格自定义表格字体样式

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

时间:2023-06-08 06:50:01

相关推荐

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

{{# } }}

代码执行效果如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。