后端返回map集合数据 layui渲染显示

在后端返回Map集合数据给前端，前端通常会将其转换为JSON对象（例如一个数组或对象对象），因为Map的数据结构在JavaScript中并不能直接解析。假设后端返回了一个类似于`[{key: 'key1', value: 'value1'}, ...]`的数组，我们可以在前端使用layui来渲染这个数据。

首先，你需要在后端将Map转换成JSON数组：

Map<String, String> map = new HashMap<>();
map.put("key1", "value1");
map.put("key2", "value2");

List<Map.Entry<String, String>> entries = map.entrySet().stream()
        .collect(Collectors.toList());

// 返回转换后的JSON格式数组
List<Map<String, String>> array = entries.stream()
        .map(entry -> new { key = entry.getKey(); value = entry.getValue() })
        .collect(Collectors.toList());

然后，在前端接收数据并使用layui展示：

layui.use(['laytable'], function () {
    var laytable = layui.laytable;
    
    $.ajax({
        url: '/api/getMapData', // 替换为实际API地址
        success: function (data) {
            data.forEach(function (item) {
                laytable.render({
                    elem: '#myTable', // 表格ID
                    title: ['Key', 'Value'],
                    data: item,
                    cols: [[{ field: 'key', title: 'Key' }, { field: 'value', title: 'Value' }]],
                    page: true, // 是否启用分页
                    toolbar: '#toolbarDemo' // 操作栏
                });
            });
        },
        error: function (err) {
            console.error('Error:', err);
        }
    });
});

这里使用了layui的laytable插件来动态创建表格并填充数据。当后端成功返回数据后，每一项都会作为新行添加到表格中。