如何将省市区树状结构数据扁平化并根据选中状态调整层级信息?

本文介绍如何将省市区三级嵌套数据扁平化,并根据选中状态调整层级信息。原始数据为树状结构,包含省、市、区三级信息(代码code、名称value和选中状态checked)。目标是根据选中状态,生成扁平化数据,并记录实际层级。

如何将省市区树状结构数据扁平化并根据选中状态调整层级信息?

原始数据结构示例:

[  {    "code": "110000",    "value": "北京市",    "checked": "1",    "children": [      {        "code": "110100",        "value": "北京市",        "checked": "1",        "children": [          {            "code": "110101",            "value": "东城区",            "checked": "1"          },          {            "code": "110102",            "value": "西城区",            "checked": "1"          }        ]      }    ]  },  {    "code": "120000",    "value": "天津市",    "checked": "1",    "children": [      {        "code": "120100",        "value": "天津市",        "checked": "1",        "children": [          {            "code": "120101",            "value": "和平区",            "checked": "0"          },          {            "code": "120102",            "value": "河东区",            "checked": "1"          }        ]      }    ]  }]

目标数据结构: 根据选中状态,如果所有子级都选中,则只保留父级;如果部分子级选中,则保留所有选中级别的信息。

[  {    "provinceAreald": "110000",    "cityAreald": null,    "countryAreald": null,    "actualAreaLevel": "1"  },  {    "provinceAreald": "120000",    "cityAreald": "120100",    "countryAreald": "120102",    "actualAreaLevel": "3"  }]

JavaScript实现: 以下代码通过递归函数实现数据转换:

function flattenData(data) {  const result = [];  function processNode(node, parent) {    if (node.checked === "1") {      const item = {        provinceAreald: parent ? parent.code : node.code,        cityAreald: null,        countryAreald: null,        actualAreaLevel: 1,      };      if (node.children) {        const childrenChecked = node.children.filter(child => child.checked === "1");        if (childrenChecked.length > 0) {          item.actualAreaLevel = 1;          childrenChecked.forEach(child => {              item.cityAreald = child.code;              item.actualAreaLevel = 2;              if(child.children){                  const grandChildrenChecked = child.children.filter(grandchild => grandchild.checked === "1");                  if(grandChildrenChecked.length > 0){                      grandChildrenChecked.forEach(grandchild => {                          item.countryAreald = grandchild.code;                          item.actualAreaLevel = 3;                      })                  }              }          })        }      }      result.push(item);    }    if (node.children) {      node.children.forEach(child => processNode(child, node));    }  }  data.forEach(province => processNode(province));  return result;}const newData = flattenData(data);console.log(newData);

这段代码更简洁高效地实现了相同的功能,避免了原代码中不必要的函数嵌套和变量传递。 它直接在递归函数内部处理所有层级,并根据选中状态动态更新actualAreaLevel以及cityArealdcountryAreald的值。

以上就是如何将省市区树状结构数据扁平化并根据选中状态调整层级信息?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1563676.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月22日 08:31:00
下一篇 2025年12月22日 08:31:16

相关推荐

发表回复

登录后才能评论
关注微信