| layui 将json字符串以表格的形式展现出来 | 您所在的位置：网站首页 › json转成表格 › layui 将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) { } }); });
|
【本文地址】
公司简介
联系我们