一、介绍
二、templet - 自定义列模板的 3 种方式
- 1、方式一：绑定模版选择器。
- 2、函数转义。自 layui 2.2.5 开始，templet 开始支持函数形式，函数返回一个参数 d，包含接口返回的所有字段和数据。如下所示：
- 3、方式三：直接赋值模版字符。事实上，templet 也可以直接是一段 html 内容，如：
三、第四种方法（解决Layui选项卡Tab和Layui模板laytpl冲突问题）

一、介绍

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

类型：String，默认值：无

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

如果自定义模版的字符量太大，我们推荐你采用 方式一；
如果自定义模板的字符量适中，或者想更方便地调用外部方法，我们推荐你采用 方式二；
如果自定义模板的字符量很小，我们推荐你采用 方式三；

二、templet - 自定义列模板的 3 种方式

1、方式一：绑定模版选择器。

    table.render({cols: [[{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器,{field:'id', title:'ID', width:100}]]});等价于：<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>注意：上述的 {{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>

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

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}]]
});

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

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

三、第四种方法（解决Layui选项卡Tab和Layui模板laytpl冲突问题）

在使用选项卡Tabs 时，选项卡与 laytpl 模板冲突，把 laytpl 模板当成字符串拼接进我们要写的位置

//表格初始化
table.render({elem: '#LAY-user-table',cols: [[{field:'title', title: '文章标题', width: 200},{field:'id', title:'ID', width:100},{title: '操作', width: 300, align: 'center', fixed: 'right', toolbar: '#table-user-oper'}]]
});

使用 方式一：绑定模版选择器。

<div class="layui-card-body" id="user-table"><table id="LAY-user-Table" lay-filter="LAY-user-Table"></table><script type="text/html" id="table-user-oper"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>{{#  if(d.user_id && d.status == 0) { }}<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>{{#  } }}{{#  if(d.close_status == 0) { }}<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>{{#  } }}</script></div>

~~~~~ 分割线：方法 [ 四 ] ~~~~~

如果自定义模板不能正常显示，也没有Js报错，建议采用 方式四；
方法四：在Js中拼接laytpl 模板字符串，再append追加到表格元素中

<div class="layui-card-body" id="user-table"><table id="LAY-user-Table" lay-filter="LAY-user-Table"></table><!--<script type="text/html" id="table-user-oper"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>{{#  if(d.user_id && d.status == 0) { }}<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>{{#  } }}{{#  if(d.close_status == 0) { }}<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>{{#  } }}</script>--></div>

//组装表格每列的操作按钮
let laytplString ='<script type="text/html" id="table-user-oper">\<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>\\{{#  if(d.user_id && d.status == 0) { }}\<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>\{{#  } }}\\{{#  if(d.close_status == 0) { }}\<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>\{{#  } }}\\<\/script>';$('#user-table').append(laytplString);

Layui选项卡Tab和Layui模板laytpl冲突问题相关推荐

layui tab选项卡外部html页面,layui的Tab选项卡知识
layui的公共类: lay-filter=" " 事件过滤器.你可能会在很多地方看到他,他一般是用于监听特定的自定义事件.你可以把它看作是一个ID选择器 layui的公共属性: ...
layui tab html,layui竖版tab选项卡
效果图: 代码: content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, m ...
layui 利用tab选项卡实现：上一步，下一步操作
虽然闲心大大已经关闭layui官网,可他一直是我们jQuery族的骄傲,话不多说了效果如下: CSS /* 顺序tab */ .order_tab .layui-tab-title{border: ...
layui选项卡嵌套选项卡_在ProtoPie中使用嵌套组件构建选项卡栏
layui选项卡嵌套选项卡 One of the powerful features of ProtoPie is the ability to build fully portable and in ...
layui选项卡切换及右键的动态操作（新增、切换、删除）
先来看个效果图(文章底部有gitee地址) 要实现的效果: 选项卡的新增以及切换选项卡刷新选项卡各种删除:删除其他.删除右侧所有.删除所有 OK,直接上代码,一些引入文件就不写了,这里只列出主要的 ...
layui中tab的切换
layui中tab的切换,可使用element.tabChange(filter, layid);用于外部切换到指定的Tab项上,如:element.tabChange('demo', 'layid' ...
layui选项卡切换刷新页面
layui选项卡切换刷新页面最近在改之前工作流页面,遇到选项卡切换刷新的问题简单叙述需求: 1.在我的流程页面分别有:我的待办.我的已办.我发起的:三个页面 2.页面有"暂无数据&quo ...
java+layui实现excel文件的模板下载和导入
因为layui表格自带导出功能,所以就不再做导出功能相关pom文件  <dependency><groupId>org.apache.po ...
java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11. ...
layui.css如何使用,Layui新手教程
Layui的学习先说说为啥我接触到了layui,因为需要去参与做一个项目,被学长推荐去学习layui,用来处理一些前端的问题. Layui作为一个前端框架,用起来是十分的方便,并且官方文档中还有很多 ...

Layui选项卡Tab和Layui模板laytpl冲突问题

一、介绍

二、templet - 自定义列模板的 3 种方式

1、方式一：绑定模版选择器。

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

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

三、第四种方法（解决Layui选项卡Tab和Layui模板laytpl冲突问题）

Layui选项卡Tab和Layui模板laytpl冲突问题相关推荐

最新文章

热门文章