LayUI 性别前端显示

落日映苍穹つ 2023-10-10 13:36 24阅读 0赞

在程序开发中，经常使用1=男生，2=女生，在数据库中存储的字段值也是1或2，在LayUI前端显示如何解决这个问题。

解决办法：通过定义字段的template渲染函数，解决字段值转换显示问题。

核心功能代码片段：

cols: [
        	[
    	      {field:'id', width: 50, title: 'ID'}
    	      ,{field:'name', title: '员工名称', align: 'center'}
    	      ,{field:'code', title: '员工编码', align: 'center'}
    	      ,{field:'sex', title: '性别', align: 'center',  templet: function(d){if(d.sex == 1){return '男'}else{return '女'}}}
    	      ,{field:'birthday', title: '员工生日', align: 'center', templet:"<div>{
       {layui.util.toDateString(d.birthday)}}</div>"}
    	      ,{field:'telephone', title: '电话号码', align: 'center'}
    	      ,{field:'workYear', title: '工作年限', align: 'center'}
    	      ,{title:'操作', align: 'center', toolbar: '#operation', width:150}
        	]
       	]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_13_color_FFFFFF_t_70_g_se_x_16][]

前端效果截图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/05f7db76ba2641bea34520973001ae8e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f63f2a2fba344588bc6b560c3ea3c491.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关 LayUI 性别前端显示

在程序开发中，经常使用1=男生，2=女生，在数据库中存储的字段值也是1或2，在LayUI前端显示如何解决这个问题。解决办法：通过定义字段的template渲染函数，解决字段

落日映苍穹つ/ 2023年10月10日 13:36/ 0 赞/ 25 阅读

相关 LayUI 日期格式显示

日期字段未进行格式化在LayUI 前端展示效果截图： ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5

我不是女神ヾ/ 2023年10月10日 13:36/ 0 赞/ 54 阅读

相关 LayUI页面显示时间格式化

实现 { field : 'cardUpdatetime', align : 'left', title : '

浅浅的花香味﹌/ 2023年06月26日 10:44/ 0 赞/ 5 阅读

相关 layui左侧菜单右侧显示

首先下载编辑好的首页静态文件看一下静态文件的分布 ![在这里插入图片描述][20191026103912601.png] 菜单页面加入如下html内容静态文件地址进

港控/mmm°/ 2023年06月10日 06:27/ 0 赞/ 327 阅读

相关 layui为什么面包屑不显示

![20210306105929595.png][] 想要实在的效果是这样的 <span class="layui-breadcrumb">

小咪咪/ 2022年11月05日 11:48/ 0 赞/ 200 阅读

相关 LayUi前端框架

首先声明一下这是我第一次使用前端框架完成后台的配合工作，这在我工作中也是第一次遇见，因为公司有自己的前端开发工程师，不必要我们自己去实现前端的效果，虽然前端的东西并不是很难，但

我不是女神ヾ/ 2022年05月20日 04:28/ 0 赞/ 335 阅读

相关 layui字体图标不显示

不要直接在下载的压缩包里直接拿自己想要的部分，整个粘进去就没事了，原因可能是官方的查找路径就是下载后的原始路径。不要拆分目录结构！查看：[http://fly.la

清疚/ 2022年05月18日 04:16/ 0 赞/ 395 阅读

相关 layui商品分类树显示

\layui商品分类树显示实现效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

痛定思痛。/ 2022年04月02日 03:22/ 0 赞/ 362 阅读

相关 layui 表格前端分页

一次请求所有数据，在前台进行分页。在表格的parseDataFun函数中调用laypage.render() laypage.render({ elem

系统管理员/ 2021年12月17日 11:57/ 0 赞/ 561 阅读

相关 layui中table显示图片

在table页面中加如下css .layui-table-cell{ text-align: center; height: auto; white-space: n

Bertha 。/ 2021年09月23日 11:50/ 0 赞/ 376 阅读