layUI templet表格数据转换(1,0:男,女)


layUI if else if判断 (templet属性:数据表格中的展示数据替换)


背景:从后台获得的数据中有性别这一栏,表格中需要展示的是男女而不是展示0、1这样的存在于数据库中的字码,因此需要转换;

第一步:在前端页面上编辑对应的逻辑

此段代码放置位置任意(建议放在layUI表格上方),但是有一点需要注意,这个script标签内只能放这一个逻辑代码,不允许有其他不相关的js代码或者其他逻辑的代码;

<script type="text/html" id="table-gender">
                {{# if(d.gender=== 0) { }}  // 可以用 === 来表示等于
                    女
                {{# } else if(d.gender== 1) { }} // 也可以用 == 来表示等于,效果相差不大
                    男
                {{# } else { }}
                    保密
                {{# } }}
</script>

注意:
  • 1、各个括号之间的逻辑嵌套,比较难以理解和记住,而且很容易就会多一个或者少一个;
  • 2、 else if 是拆分开写的,千万不要写成elseif
  • 3、如果判断的分支只是是或否的话直接将else if 删除掉即可;
  • 4、参数比较时都有个d.,这个是layUI的固定语法,在d.后跟上所需要进行判定的参数即可;
  • 5、判定等于时既可以用两个等于号也可以用三个等于号,均是相等的意思 ;

第二步:与Table表中的某列相关联

下面是原生的layUI框架的数据表格代码,其中以

<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test', 
    url:'/demo/table/user/',
    cellMinWidth: 80,
    ,cols: [[
      {field:'id', title: 'ID', sort: true},
      {field:'username',title: '用户名'},
      {field:'gender', title: '性别', templet: '#table-gender'}
    ]]
  });
});
</script>
注意:
  • 1、templet 属性前有,
  • 2、 templet对应着之前设定的逻辑代码的id值;

《END》


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM