关于DataGrid处理后端返回的固定格式数据

最新推荐文章于 2021-09-16 19:57:32 发布

鱼片橙子

最新推荐文章于 2021-09-16 19:57:32 发布

阅读量931

点赞数 1

CC 4.0 BY-SA版权

分类专栏： easyui

本文链接：https://blog.youkuaiyun.com/qq_26171035/article/details/98307160

easyui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何解决easyui DataGrid在显示数据时遇到的问题，当后端返回的数据格式不符合默认要求（total和rows）时，通过使用loadFilter方法对后端返回的数据进行转换和处理，确保DataGrid能够正确展示5条记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于easyui的datagrid处理列表中的数据是固定格式

 {total: 12, rows: Array[5]}

total是总条数，rows是要展示的数据，我这里是要展示5条，然后我后端返回的固定格式是这样的

{
code: 30000,
msg: successs,
data: [{id: xxx, name: xxx, ...}, {...}]
}

这datagrid肯定是展示不了的，这就需要用到loadFilter来处理后端的数据了。代码展示

 $('#logTable').datagrid({
        singleSelect:true,
        pagination:true,
        pageNumber:1,
        url:"/getLogList",
        pageSize:5,
        pageList: [5,10,15,20],
        rowNumbers: false,
        columns:[
            [
                {field:'log_id',title:'log_id',hidden:true},
                {field:'log_name',title:'账户名称',width:100,align:'center'},
                {field:'enter_time',title:'上线时间',width:200,align:'center'},
                {field:'offline_time',title:'下线时间',width:200,align:'center'}
            ]],
        loadFilter:function(data) {
            return loadFilter(data);    //自定义过滤方法
        }
    });
}
//过滤后端传递到前端的值
function loadFilter(data) {
    var jsonArray=data.data;
var result = jsonArray[jsonArray.length-1].total;//后端数据是[{...}..,{total=总条数}]即展示数据加上条数，所以后面循环时要减一
    var rows=[];
    for(var i=0; i< jsonArray.length-1; i++){
        rows.push({
            log_id:jsonArray[i].log_id,
            log_name:jsonArray[i].log_name,
            enter_time:jsonArray[i].enter_time,
            offline_time:jsonArray[i].offline_time
        });
    }
    var value = {
        total:result,
        rows:rows
    };
    return value;
}

这样就可以正常翻页了