zoukankan      html  css  js  c++  java
  • 省市用element级联选择器,构造树形结构的数据(两层)

        //省市数据格式化
    element 级联选择器 树形结构
    
    
      /**
         * @param {Object} addressMap 数据源
         * @param {String} idKey 数据id
         * @param {String} pIdKey 父节点id
         * @param {String} childrenKey 树形节点名称
         */
      formatAddress(addressMap = {}, idKey = 'id', pIdKey = 'pId', childrenKey = 'children') {
          let map = {}; //存省市code值及序号
          let data = []; //对象数组
          let dataset = []; //格式化后的省市数据
          //map数据转对象数组
          for (let i in addressMap) {
            let obj = {};
            obj[i] = addressMap[i];
            obj['label'] = addressMap[i];
            obj['value'] = i;
            //根据数据源(例:湖北省17 武汉市1701,父id则为17),构造id和父id
            if (i.length !== 2) {
              obj[pIdKey] = i.slice(0, 2);
            }
            obj[idKey] = i;
            data.push(obj);
          }
    
          //存值 key值: 省市key值(如'01'),value值:对象数组的序号index(从0开始),便于取值
          data.forEach((item, index) => {
            map[item[idKey]] = index;
            console.log(map);
          });
    
          for (let k = 0; k < data.length; k++) {
            let node = data[k]; //当前对象
            let pIdValue = node[pIdKey];  //从当前对象获取pId对应的值
            let mapIndex = map[pIdValue]; //需要放入children的序号
            //判断是否存在pId
            if (pIdValue !== '-1' && pIdValue !== '' && data[mapIndex]) {
              //判断是否存在children,找到其pId对应的位置并将值放入其中
              if (!data[mapIndex][childrenKey]) {
                data[mapIndex][childrenKey] = [];
                data[mapIndex][childrenKey].push(node);
              } else {
                data[mapIndex][childrenKey].push(node);
              }
            } else {
              dataset.push(node);
            }
          }
    
          return dataset;
        }
    数据源(addressMap)举例:
    {
        "10":"江苏省",
        "11":"浙江省",
        "12":"安徽省",
        "13":"福建省",
        "14":"江西省",
        "15":"山东省",
        "16":"河南省",
        "17":"湖北省",
        "18":"湖南省",
        "19":"广东省",
        "20":"广西壮族自治区",
        "21":"海南省",
        "22":"重庆市",
        "23":"四川省",
        "24":"贵州省",
        "25":"云南省",
        "26":"西藏自治区",
        "27":"陕西省",
        "28":"甘肃省",
        "29":"青海省",
        "30":"宁夏回族自治区",
        "31":"新疆维吾尔自治区",
        "2201":"万州区",
        "2202":"涪陵区",
        "2203":"渝中区",
        "2204":"大渡口区",
        "2205":"江北区",
        "2206":"沙坪坝区",
        "2207":"九龙坡区",
        "2208":"南岸区",
        "2209":"北碚区",
        "2210":"綦江区",
        "2211":"大足区",
        "2212":"渝北区",
        "2213":"巴南区",
        "2214":"黔江区",
        "2215":"长寿区",
        "2216":"江津区",
        "2217":"合川区",
        "2218":"永川区",
        "2219":"南川区",
        "2220":"璧山区",
        "2221":"铜梁区",
        "2222":"潼南区",
        "2223":"荣昌区",
        "2902":"海东市",
        "09012":"延边市",
        "09011":"通榆县",
        "09010":"抚松县",
        "09009":"敦化市",
        "09008":"通化市",
        "09007":"长春市",
        "09006":"吉林市",
        "09005":"四平市",
        "09004":"辽源市",
        "09003":"白山市",
        "09002":"松原市",
        "09001":"白城市",
        "0909":"宝山区",
        "0907":"杨浦区",
        "0908":"闵行区",
        "0905":"普陀区",
        "0906":"虹口区",
        "0903":"长宁区",
        "0904":"静安区",
        "0901":"黄浦区",
        "0902":"徐汇区",
        "0914":"青浦区",
        "0915":"奉贤区",
        "0912":"金山区",
        "0913":"松江区",
        "0910":"嘉定区",
        "0911":"浦东新区",
        "01":"北京市",
        "02":"天津市",
        "03":"河北省",
        "04":"山西省",
        "05":"内蒙古自治区",
        "06":"辽宁省",
        "07":"吉林省",
        "08":"黑龙江省",
        "09":"上海市",
        "03021":"景县",
        "03022":"魏县",
        "03020":"任丘市",
    "0204":"南开区", "0205":"河北区", "0202":"河东区", "0203":"河西区", "0201":"和平区", "0208":"西青区", "0209":"津南区", "0206":"红桥区", "0207":"东丽区", "0215":"静海区", "0216":"蓟州区", "0213":"滨海新区", "0214":"宁河区", "0211":"武清区", "0212":"宝坻区", "0210":"北辰区", "03018":"怀来县", "03019":"平泉县", "03014":"定州市", "03015":"迁安市", "03016":"宁晋县", "03017":"涿州市", "0105":"丰台区", "03010":"石家庄市", "0106":"石景山区", "0103":"西城区", "03012":"衡水市", "0104":"朝阳区", "03013":"辛集市", "0101":"海淀区", "0102":"东城区", "0109":"通州区", "0107":"门头沟区", "0108":"房山区", "03007":"承德市", "03008":"秦皇岛市", "03009":"邢台市", "03003":"廊坊市", "03004":"沧州市", "03005":"保定市", "03006":"邯郸市", "0116":"延庆区", "0114":"平谷区", "03001":"唐山市", "0115":"密云区", "03002":"张家口市", "0112":"大兴区", "0113":"怀柔区", "0110":"顺义区", "0111":"昌平区" }
  • 相关阅读:
    深度谈谈单例模式
    高并发的下的数据库设计
    D3开发中的资料整理
    IIS配置过程中的常见问题
    css3常用动画+动画库
    非常实用的10款网站数据实时分析工具
    Jquery中AJAX参数详细介绍
    首次使用Vue开发
    js 鼠标拖拽元素
    Oracle涂抹oracle学习笔记第10章Data Guard说,我就是备份
  • 原文地址:https://www.cnblogs.com/scallop/p/12166986.html
Copyright © 2011-2022 走看看