layui中使用自定义数据格式对数据表格进行渲染

Posted 2020-11-25 code-handling

1.引入

<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>

2.页面代码

<div class="layui-card-body">
     <table class="layui-hide" id="permission-table" lay-filter="permission-table"></table>

      <script type="text/html" id="permission-table-operate">
           <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
           <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>
</div>

<script>
    layui.use(‘table‘, function(){
      var table = layui.table;

    table.render({
                elem: ‘[lay-filter="permission-table"]‘,
                url:‘/permission/list.do‘,
                where: {},
                cellMinWidth: 80,

                //table的全局配置
                size: ‘lg‘,
                skin: ‘line‘,
                //每页显示的条数
                limit: 10,
                //是否显示加载条
                loading: true,
                //解析服务器端返回的数据
                parseData: function (res) {
                    /*if (res.code == 500) {
                        return false
                    }*/
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.total,
                        "data": res.data.rows
                    };
                },
                //重新规定返回的数据格式
                response: {
                    //数据状态的字段名称
                    statusName: ‘code‘,
                    statusCode: 200,
                    msgName: ‘msg‘, //状态信息的字段名称
                    dataName: ‘data‘, //数据详情的字段名称
                    countName: ‘count‘ //数据条数的字段名称，用于 table
                },

                cols: [[{
                    field:‘id‘, width:80, title: ‘ID‘, sort: true, fixed: ‘left‘},
                    {field:‘permissionname‘, title: ‘权限名称‘},
                    {field:‘url‘, title: ‘资源路径‘},
                    {align:‘center‘, fixed: ‘right‘, toolbar: ‘#permission-table-operate‘}
                ]],
                page: true
            });
    });
</script>

 

3.控制层

使用R类作为返回数据格式的载体，permissionService层使用mybatis-plus的分页功能查询列表。

@Builder
@ToString
@AllArgsConstructor
public class R<T> implements Serializable {

    @Getter
    @Setter
    private int code = 200;

    @Getter
    @Setter
    private Object msg = "success";

    @Getter
    @Setter
    private T data;

public R(T data) {
        super();
        this.data = data;
    }
}

@RestController
@RequestMapping("/permission")
public class PermissionController extends BaseController {

    @RequestMapping("/list.do")
    public R findByPage(SysPermission permission, QueryPage queryPage) {
        return new R<>(getData(permissionService.list(permission, queryPage)));
　　 }
     public Map<String, Object> getData(IPage<?> page) {
        Map<String, Object> data = new HashMap<>();
        data.put("rows", page.getRecords());
        data.put("total", page.getTotal());
        return data;
    }
}

4. 返回的数据

controller层返回的数据

R(code=200, msg=success,data={total=4, rows=

[SysPermission(id=1, permissionname=test111, url=/test111),

SysPermission(id=2, permissionname=test22, url=/test22),

SysPermission(id=3, permissionname=test33, url=/test33),

SysPermission(id=6, permissionname=test66, url=/test66)]})

页面接收到的数据

{"code":200,"msg":"success","data":{"total":4,"rows":

[{"id":1,"permissionname":"test111","url":"/test111"},

{"id":2,"permissionname":"test22","url":"/test22"},

{"id":3,"permissionname":"test33","url":"/test33"},

{"id":6,"permissionname":"test66","url":"/test66"}]}}

5.渲染结果