layui 将json字符串以表格的形式展现出来 | 您所在的位置:网站首页 › json转成表格 › layui 将json字符串以表格的形式展现出来 |
先看下Json数据:
[{"name":"定/即时采集","code":"TIMER","value":"11111aaa"},
{"name":"设备管理员","code":"MANAGER","value":"2222bbb"},
{"name":"设备位置","code":"LOCATION","value":"3333ccc"},
{"name":"用电属性","code":"POWER_ATTR","value":"44444dddd"}]
在layui中,我们需要将这种json数据的格式转换成数组格式:
存放进data中去 然后以这种格式发送到前台; 前台就可以通过layui的方式将这个json数据以表格的形式显示出来了:
通用的列表格式: Layui layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'/demo/table/user/' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 ,cols: [[ {field:'id', width:80, title: 'ID', sort: true} ,{field:'username', width:80, title: '用户名'} ,{field:'sex', width:80, title: '性别', sort: true} ]] }); });
自己写的这个列表格式: 编辑 删除layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){ var laydate = layui.laydate //日期 ,laypage = layui.laypage //分页 ,layer = layui.layer //弹层 ,table = layui.table //表格 ,carousel = layui.carousel //轮播 ,upload = layui.upload //上传 ,element = layui.element //元素操作 ,slider = layui.slider //滑块 table.render({ elem: '#demo' ,url: _path +'/channel/ExtendValues2.do?channelId='+channelId ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 ,totalRow : false ,unresize : false ,cols: [[ { field : 'seq', title : '序号', event : 'monthSign', width : '10%', align : 'center', templet : function(row) { return row.seq; } }, { field : 'name', title : '用户名', event : 'monthSign', width : '30%', align : 'center', templet : function(row) { return row.name; } }, { field : 'value', title : '对应值', width : '32%', event : 'monthSign', align : 'center', templet : function(row) { return row.value; } }, { fixed: 'right', align:'center', toolbar: '#barDemo' } ]], done : function(res, curr, count) { } }); });
|
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |