layui数据表格生成进度条
Layui数据表格使用if判断修改内容与生成动态进度条的操作详情记录
最近小编也是突然接手一下公司的web前端改造计划、小编不做前端已经很久了、突然接到这样的“盛情邀请”让我有点猝不及防、没有办法只能硬着头皮上了 这里就做一个记录、还望各位大佬清点喷！！ 首先需要实现的功能点如下 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:…
