省市区三级联动,根据一个cityCode(递归)查询关联的父级信息
2019-03-21 17:16
295 查看
通过一个 citycode 比如
结果:
以下是封装的代码
[code]//area.js import { findAllParents } from "@/utils/json"; export function getAreaCode(nodeId) { const parents = findAllParents(getArea(),{"code":nodeId},(item,node) => item.code === node.code,{ props: { children: "child" } }); let codes = [] let names = [] for(let node of parents) { codes.push(node.code) names.push(node.name) } codes.push(nodeId) let data = {codes:codes,names:names} return data } //省市县 三级 //这个json我在网上找的 太长了不复制那么多 export function getArea (){ let data = [ {"code":"110000","name":"北京市","child":[{"code":"110100","name":"北京城区","child":[{"code":"110106","name":"丰台区","child":null},{"code":"110107","name":"石景山区","child":null},{"code":"110108","name":"海淀区","child":null},{"code":"110109","name":"门头沟区","child":null},{"code":"110111","name":"房山区","child":null},{"code":"110112","name":"通州区","child":null},{"code":"110113","name":"顺义区","child":null},{"code":"110114","name":"昌平区","child":null},{"code":"110115","name":"大兴区","child":null},{"code":"110116","name":"怀柔区","child":null},{"code":"110117","name":"平谷区","child":null},.......] return data }
[code]//json.js const defaults = { props: { children: "children" } } export const findParent = (data, node, predicate, options = {}) => { let config = Object.assign({}, defaults, options); let parent = undefined; for (let i = 0; i < data.length; i++) { if (parent) return parent; let item = data[i]; if (item[config.props.children] && item[config.props.children].length > 0) { let child = item[config.props.children].filter(c => predicate(c, node)); if (child.length > 0) { parent = item; } if (parent === undefined) { parent = findParent(item[config.props.children], node, predicate, config); } else { break; } } } return parent; } export const findAllParents = (data, node, predicate, options = {}) => { let config = Object.assign({}, defaults, options); let allParents = []; let parent = findParent(data, node, predicate, config); while (parent !== undefined) { allParents.unshift(parent); parent = findParent(data, parent, predicate, config); } return allParents; }
over~~
相关文章推荐
- sql when case 根据不同 case 查询不同关联表信息
- 用php和ajax写一个省市区的三级联动,实现地区的下拉选择
- 一秒集成 省市区三级联动选择器-CityPickerView
- Android中使用开源框架citypickerview实现省市区三级联动选择
- 省市区三级联动插件:app-jquery-cityselect.js
- JQuery中国省市区无刷新三级联动查询
- 简易封装一个省市区的三级联动方法
- 省市区三级联动city-picker
- mysql中使用递归实现父级部门所有子级信息的查询
- js实现一个省市区三级联动选择框代码分享
- 一行代码搞定省市区三级联动(推荐一个JS封装类)
- JQuery中国省市区无刷新三级联动查询
- 三级联动省市区信息实现(Mysql)
- 简单的一个用javascript做的'省市区'三级联动效果
- Android中使用开源框架citypickerview实现省市区三级联动选择
- 一行代码搞定省市区三级联动(推荐一个JS封装类)
- vue用mint-ui的picker组件封装一个省市区三级联动组件
- Android中使用开源框架Citypickerview实现省市区三级联动选择
- jquery省市区三级联动插件CitySelect笔记
- 数据库动态加载省市区信息,实现三级联动