Layui数据表格使用if判断修改内容与生成动态进度条的操作详情记录

最近小编也是突然接手一下公司的web前端改造计划、小编不做前端已经很久了、突然接到这样的“盛情邀请”让我有点猝不及防、没有办法只能硬着头皮上了 这里就做一个记录、还望各位大佬清点喷!!

GD-sec

首先需要实现的功能点如下

  1. 数据表格原先为静态要实现动态生成
  2. 表格内要增加动态的一个进度条(仿照任务进度条一样)
  3. 把json生成的数据在前端更改为中文

这都不是难点 主要是没有美工在配合让我自己想UI设计与色彩搭配、我的内容如下图

告辞告辞

没办法做下去吧 废话不多说上手layui这套前端框架、发现真香!!!
首先数据表格实现很简单、layui官网已经给了文档、只需要按照他的文档来做就可以实现了、主要要注意的是他的json返回的内容要和文档搭配、否则会出现数据接口错误呀什么报错的!这里是血的教训、我搞了好久都不知道为什么会出现这样的错误、后来仔细看了一下文档才知道的!

首先按照layui官网文档所示创建一个数据表格的demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
  
});
</script>
</body>
</html>

要导入他的layui的js哟!否则你无法实现效果的哟 这里的elem就是对应你html里面的那个id也就是table的、url:对应的是你的json地址、下面的表头就对应你的json数据头就好了、这样就快速生成一个数据表格了、比自己写的快多了

第一步我们已经实现了数据表格了、那么就实现第二步的动态进度条的效果了

首先我的后端已经给我返回的json里面带了一些值、25%、50%的值、那么我们就进行一个判断加上这个参数、return返回一个我们做好的html页面在上面就好了

{//我这里是在表头那里加的 也就是正常的一个表头我在里面加了函数进行调用
field:'jindu',//这里的是json的命名,我直接给他翻译成中文拼音!
希望各位有良好的命名!我这里只是做一个演示
title:'进度条',//你的title标题
align:'center',//让这个居中显示
templet: function(a) {
    if(a.jindu == "0%"){
        return html0;
    }else if (a.jindu == "25%") {
        return html0;
    }else if (a.jindu == "50%") {
        return html50;
    }else if (a.jindu == "75%") {
        return html75;
    }else if(a.jindu == "100%"){
        return html100;
    }
}
}

如上所示这样我们就可以做一个简单的if判断了(这里我随意就使用了if 当然也可以使用switch各有所爱、也恕我太菜) if去判断这个函数里面的值是否等于多少、若是等于了多少就给他返回一个html页面、html页面如下

var html100='<link rel="stylesheet" type="text/css" href="/css/progress-bar.css" />';
html100 += '<div class="stepInfo">';
html100 += '<ul>';
html100 += '<li></li>';
html100 += '<li></li>';
html100 += '</ul>';
html100 += '<div class="stepIco stepIco1" >1';
html100 += '<div class="stepText" style="margin-left:-27px">等待接收</div>';
html100 += '</div>';
html100 += '<div class="stepIco stepIco2 " >2';
html100 += '<div class="stepText" >接收成功</div>';
html100 += '</div>';
html100 += '<div class="stepIco stepIco3 " >3';
html100 += '<div class="stepText" >处理中</div>';
html100 += '</div>';
html100 += '<div class="stepIco stepIco4 " >4';
html100 += '<div class="stepText" >处理完成</div>';
html100 += '</div>';
html100 += '</div>';

这样当进度条的值为100的时候我就给他显示为100的那个html进度条 效果如下

进度条效果

前面俩步都处理完成后、我们进行最后一步处理、把后端传上来的值改成中文、这个就更简单了!直接使用if判断完事!

{
field: 'Type',
title: '类型',
templet:function(dd){
    if(dd.Type == 'user'){
        return '用户'    
    }else if (dd.Type == 'XXXX') {
        return'返回xxx'
    }
},
align: 'center',
}

这样就又完成一个内容!是不是很简单! 当然写的可能也不是很好 只是做一个记录分享!欢迎各位大佬给点其他意见!

文章借鉴地址:

https://www.layui.com/doc/modules/table.html layui数据表格文档

原创文章,作者:zfj-zfj,如若转载,请注明出处:https://www.zfjsec.com/130.html
-- 展开阅读全文 --
树莓派测试麦克风录音
« 上一篇 04-27
centos7安装oracle12c详细过程与其他问题的总结详情
下一篇 » 04-27

发表评论