1.引入

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

2.页面代码

<table class="layui-hide"
<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.渲染结果









							

   
版权声明：本文为Code-Handling原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。



本文链接：https://www.cnblogs.com/Code-Handling/p/12123886.html