easyUI tree数据格式的转换

最新推荐文章于 2024-08-30 07:21:10 发布

stSahana

最新推荐文章于 2024-08-30 07:21:10 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： easyui 数据

本文链接：https://blog.youkuaiyun.com/stSahana/article/details/52149912

本文介绍了如何将后端返回的数据转换为符合easyUI Tree展示需求的格式。通过loadFilter属性，实现了从原始数据到目标格式的转换，确保数据能在前端以tree形式正确显示。

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

easyUI tree数据格式的转换

最近在写前端界面时，要把后端存储在数据库的数据在前端以tree的形式展示出来，记录之间的关系由id-pid确定，这与easyUI tree所需要的数据格式不同，需要做一些转换才能使用。

原数据格式：

[
  {
    "authorityId": "1",
    "authorityName": "1",
    "parentId": ""
  },
  {
    "authorityId": "2",
    "authorityName": "2"
  },
  {
    "authorityId": "11",
    "authorityName": "11",
    "parentId": "1"
  },
  {
    "authorityId": "12",
    "authorityName": "12",
    "parentId": "1"
  },
  {
    "authorityId": "113",
    "authorityName": "113",
    "parentId": "11"
  },
  {
    "authorityId": "21",
    "authorityName": "21",
    "parentId": "2"
  },
  {
    "authorityId": "22",
    "authorityName": "22",
    "parentId": "2"
  },
  {
    "authorityId": "221",
    "authorityName": "221",
    "parentId": "22"
  },
  {
    "authorityId": "2211",
    "authorityName": "2211",
    "parentId": "221"
  }
]

所需要的目标格式：

[
  {
    "authorityId": "1",
    "authorityName": "1",
    "parentId": "",
    "id": "1",
    "text": "1",
    "children": [
      {
        "authorityId": "11",
        "authorityName": "11",
        "parentId": "1",
        "id": "11",
        "text": "11",
        "children": [
          {
            "authorityId": "113",
            "authorityName": "113",
            "parentId": "11",
            "id": "113",
            "text": "113",
            "children": [

            ]
          }
        ]
      },
      {
        "authorityId": "12",
        "authorityName": "12",
        "parentId": "1",
        "id": "12",
        "text": "12",
        "children": [

        ]
      }
    ]
  },
  {
    "authorityId": "2",
    "authorityName": "2",
    "id": "2",
    "text": "2",
    "children": [
      {
        "authorityId": "21",
        "authorityName": "21",
        "parentId": "2",
        "id": "21",
        "text": "21",
        "children": [

        ]
      },
      {
        "authorityId": "22",
        "authorityName": "22",
        "parentId": "2",
        "id": "22",
        "text": "22",
        "children": [
          {
            "authorityId": "221",
            "authorityName": "221",
            "parentId": "22",
            "id": "221",
            "text": "221",
            "children": [
              {
                "authorityId": "2211",
                "authorityName": "2211",
                "parentId": "221",
                "id": "2211",
                "text": "2211",
                "children": [

                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

效果：

这里写图片描述

实现代码

主要是通过loadFilter属性来完成data格式的转换，

function(data,parent)

@data：原始数据

@parent：DOM节点，指向父节点

$("tree-menu").tree({
    .........................
    /**
    *其他初始化条件
    **/
    loadFilter : function(data, parent) {
                    var tree=[];
                    for(var i=0;i<data.length;i++) {//为每个节点赋予id，text
                        data[i].id = data[i].authorityId;//为id属性赋值，已有可略过
                        data[i].text = data[i].authorityName;//为text属性赋值
                        data[i].children=[];//初始化children属性
                        if(!data[i].parentId||data[i].parentId==""){//加载一级节点
                            tree.push(data[i]);
                        }
                    }
                    for(var i=0;i<data.length;i++){
                        for(var j=0;j<data.length;j++){//找到data[i]的父节点data[j]
                            if(data[i].parentId==data[j].id){
                                data[j].children.push(data[i])
                                break;
                            }
                        }
                    }
                    return tree;//返回tree
                },

})