前言

在前文 layui+springboot实现表格增删改查中，我们展示了如何使用layui将数据库数据渲染到前端表格中，但现在问题来了，如果不加特殊处理，前端表格直接显示数据库存储信息是不合适的，例如数据库有一个类型字段：0和1，0表示国产，1表示进口，前端显然不能直接显示0和1，而是应该根据后端返回的数字进行判断，展示相应的内容。

layui table的自定义模板功能能非常方便地解决这个问题，首先看下效果图。

数据库数据：

前端展示：

甚至，更复杂一些，将select下拉选择框和switch开关集成到table表格里（具体的实现请见https://blog.csdn.net/mu_wind/article/details/106598666）：

后端返回的完整数据：

{{"msg": "操作成功！","code": "0","data": [{"id": 1,"name": "iPhone","type": "0","price": 6000.0,"size": 55,"status": 0,"description": "说明"},{"id": 2,"name": "watch","type": "1","price": 500.0,"size": 35,"status": 1,"description": "说明"},{"id": 3,"name": "television","type": "1","price": 1000.0,"size": 90,"status": 1,"description": "说明"},{"id": 4,"name": "computer","type": "1","price": 4500.0,"size": 60,"status": 1,"description": "说明"}],"count": 4
}}

方式一：函数转义

所谓函数转义，就是在表格cols的对应列中直接写一段函数：

table.render({elem: '#goods_table', id: 'goodsReload', url: '/test/getGoodsInfo', method: 'get', title: '用户表', toolbar: '#goods_headerBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档, cols:[[{type: 'checkbox', fixed: true},{field: 'type',title: '类&emsp;型',width: 100,align: 'center',// data就是行数据：{"id": 1,"name": "iPhone","type": "1","price": 6000.0,"size": 55,"status": 0,"description": "说明"}templet: function (d) {var type = d.type;if (type == 0) {return '<font color="#0000FF">国&ensp;产</font>';} else {return '<font color="#5FB878">进&ensp;口</font>';}}}// 其他行省略，可去【前端系列-3】获得完整代码{fixed: 'right',title: '操作',toolbar: '#goos_lineBar',align: 'center',width: 120,style: 'font-size:13px'}]]
});

这样的写法，简单直接，缺点是复用性差，有可能导致代码冗余。

方式二：绑定模版选择器

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

<script type="text/html" id="typeTpl">{{#  if(d.type ==0 ){ }}<p style="color: #0000FF">国&ensp;产</p>{{#  } else { }}<p style="color: #00FF00">进&ensp;口</p>{{#  } }}
</script>

table.render中的对应列templet内容中直接引用上面的模板即可

table.render({elem: '#goods_table', id: 'goodsReload', url: '/test/getGoodsInfo', method: 'get', title: '用户表', toolbar: '#goods_headerBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档, cols:[[{type: 'checkbox', fixed: true},{field: 'type',title: '类&emsp;型',width: 100,align: 'center',templet: '#typeTpl'}// 其他行省略，可去【前端系列-3】获得完整代码{fixed: 'right',title: '操作',toolbar: '#goos_lineBar',align: 'center',width: 120,style: 'font-size:13px'}]]
});

这样的话，如果有多处表格使用同一个模板，代码复用性将得到加强。

还有一种方式：直接赋值模版字符

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

layui表格使用自定义模板templet相关推荐

Layui数据表格之自定义模板
开发工具与关键技术:VS.layui 作者:陆桂超撰写时间:2019年6月4日 Layui插件是现在比较主流的一个前端 UI 框架,很适合界面的快速开发.Layui里面包含了很多个模块,这里我要讲解 ...
layui 表格内容写temple函数_layui表格-template模板的三种用法
问题情境: layui中将数据库数据通过layui table渲染到前端表格,非常简单,但是如果数据库存储的信息不能被直接展示,项目中该页面有好几个这样的字段,会员类型,支付类型,会员时长还有平台类型 ...
layui中的数据表格-自定义模板
layui中的数据表格-自定义模板<script>layui.use('table', function () {var table = layui.table;//第一个实例table. ...
layui 数据表格 table的一些技巧，及自定义模板的使用
table数据有时总会有判断男女类型之类的,所以通过下列方法即可轻松解决. 当然,这样在前台直接写死的貌似不大好,没关系,我们可以通过自定义模板的方法数据都来自后台,前台只做判断,如: 效果 ...
layui 表格字体_Layui表格自定义表格字体样式
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Layui表格中单元格样式可通过templet-自定义模板改变单元格内容样式: 在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的 ...
iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结数据渲染相关正常渲染直接从教程中拿出来的组件代码: columns中填写的数据必须是一个数组,代表的是表头相关,常 ...
layui表格单元格样式自定义
layui表格单元格样式自定义在表格渲染完的回调done中操作: 1.匹配行,根据样式进行匹配,可F12查看(最终目的是只匹配到数据行) 2.匹配列,匹配成功后,就可以确定到某个单元格,获取行对应的 ...
layui表格——table.render(options)（转）
一.使用方法 1.在页面代码里写一个table标签和id属性 <table id="demo" lay-filter="test"></tab ...
LAYUI表格自动渲染
引入jq 和layui插件在页面加载时间里加载layui里需要的文件 .在use加载事件里执行渲染 elem: '#demo' //指定原始表格元素选择器(推荐id选择器) cols: [{}] / ...

layui表格使用自定义模板templet

前言

方式一：函数转义

方式二：绑定模版选择器

layui表格使用自定义模板templet相关推荐

最新文章

热门文章