layui中使用自定義數據格式對數據表格進行渲染

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.渲染結果