对象数组的赋值操作问题

最新推荐文章于 2023-07-06 17:46:20 发布

uNlanD

最新推荐文章于 2023-07-06 17:46:20 发布

阅读量6k

点赞数

分类专栏： JS 插件文章标签： JS 数组对象 layui table

本文链接：https://blog.csdn.net/qq_42610806/article/details/81747120

版权

在项目中，遇到使用Layui Table显示对象数组数据的问题。需要根据temp值对数据排序并拆分为三列展示。首先对原始数据按temp排序，再拆分成三个新数组。接着通过Object.assign()重组数据，生成colData以适应Layui Table。然而，由于对象赋值的特性，不能直接对排序后的data操作，因此引入firstData函数每次获取data的新对象副本以保持原数据不变，从而实现动态排序展示。

摘要由CSDN通过智能技术生成

项目中遇到关于对象数组的操作问题，大概是将数据绑定到Layui的Table中。由于layui表格的数据填充是按照它的格式需求填入的，比如目前我遇到的是：

 cols: [[ 
            { field: 'index_col1', title: '序号', width: 66 },
            { field: 'stationName_col1', title: '站名',width: 106 },
            { field: 'temp_col1', title: '实时气温', width: 122.5, edit: 'text'},
            { field: 'index_col2', title: '序号', width: 66 },
            { field: 'stationName_col2', title: '站名', width: 106 },
            { field: 'temp_col2', title: '实时气温', width: 122.5, edit: 'text' },
            { field: 'index_col3', title: '序号', width: 66 },
            { field: 'stationName_col3', title: '站名', width: 106 },
            { field: 'temp_col3', title: '实时气温', width: 122.5, edit: 'text'}
        ]],

然后我获取到的数据大概是这样的：

data = [{ "index": "1", "stationName": "安吉1", "temp": "43" }, { "index": "1", "stationName": "安吉2", "temp": "23" }, {"index": "1", "stationName": "安吉3", "temp": "13" },
    { "index": "1", "stationName": "安吉4", "temp": "63" }, { "index": "1", "stationName": "安吉5", "temp": "43" }, {"index": "1", "stationName": "安吉6", "temp": "53" },
    { "index": "1", "stationName": "安吉7", "temp": "123" }, { "index": "1", "stationName": "安吉8", "temp": "33" }