初始的 UI 界面,是一个配送区域的表格
area:[
{"areaIds": "["110000","120000","130000","140000","150000","210000","220000","230000","310000","320000","330000","340000","350000","360000","370000","410000","420000","430000","440000","450000","460000","500000","510000","520000","530000","540000","610000","620000","630000","640000","650000","710000","810000","820000"]",
"areaNames": "北京市、天津市、河北省、山西省、内蒙古自治区、辽宁省、吉林省、黑龙江省、上海市、江苏省、浙江省、安徽省、福建省、江西省、山东省、河南省、湖北省、湖南省、广东省、广西壮族自治区、海南省、重庆市、四川省、贵州省、云南省、西藏自治区、陕西省、甘 肃省、青海省、宁夏回族自治区、新疆维吾尔自治区、台湾省、香港特别行政区、澳门特别行政区"
"shoujian": "1",
"yunfei": "1",
"xujian": "1",
"xufei": "1"
}
]
上边的 json 数据就是我们需要后台发送请求的字段
其中:area 代表的是整个配送区域表格的数据,也就是咱们这个模块 的数据
areaIds 这个字段是用户选中的 id 值,包括省的 id 或者省的 id 和市的 id 或者省市区县都有
这里值得注意的是
当用户点击全选,areaIds 的值就是
[“110000″,”120000″,”130000″,”140000″,”150000″,”210000″,”220000″,”230000″,”310000″,”320000″,”330000″,”340000″,”350000″,”360000″,”370000″,”410000″,”420000″,”430000″,”440000″,”450000″,”460000″,”500000″,”510000″,”520000″,”530000″,”540000″,”610000″,”620000″,”630000″,”640000″,”650000″,”710000″,”810000″,”820000″]”
即所有省份的值
但凡差一个区县,就不能返回所有的省份,而是其他选中的省份加上完全选中的市的 id 加上选中的区县 id
换句话说也就是说同一级所有的都选中直接返回上一级的 id
如果没有全部选中的话就把这一级选中的值返回
areaIds 这个字段最后就是选中的最满的一级的集合加上没有选满的 id
areaNames 这个字段就是对应着 id 的值,是个字符串集合
其中【指定可配送区域和运费】是一个按钮,点击出现弹窗
点击【全选】
再点击全选,所有选中的市全部取消
点击全选之后点确定按钮
当用户点击了全选之后,只能增加这一行的数据,
【指定可配送区域和运费】这个就不能点击选择了
那此时发送后台的数据就是开头所说的
area:[
{"areaIds": "["110000","120000","130000","140000","150000","210000","220000","230000","310000","320000","330000","340000","350000","360000","370000","410000","420000","430000","440000","450000","460000","500000","510000","520000","530000","540000","610000","620000","630000","640000","650000","710000","810000","820000"]",
"areaNames": "北京市、天津市、河北省、山西省、内蒙古自治区、辽宁省、吉林省、黑龙江省、上海市、江苏省、浙江省、安徽省、福建省、江西省、山东省、河南省、湖北省、湖南省、广东省、广西壮族自治区、海南省、重庆市、四川省、贵州省、云南省、西藏自治区、陕西省、甘 肃省、青海省、宁夏回族自治区、新疆维吾尔自治区、台湾省、香港特别行政区、澳门特别行政区"
"shoujian": "1",
"yunfei": "0",
"xujian": "1",
"xufei": "0"
}
]
- 数组只有一条对象数据
- areaIds 全部的省份 id 组成的数组
- areaNames 全部的省份 name 组成的字符串
- shoujian 首件 1 件
- yunfei 运费 0 元
- xujian 续件 1 件
- xufei 续费 0 元
点编辑还能接着打开弹窗
把河北省点一下
把石家庄选中
点击石家庄的下拉箭头出现选择区县的弹窗
把新乐市取消点击确定之后
石家庄市的选中没了 红色的区县个数减 1
然后把保定市选中 我们点击确定看一下
当前需要发给后台的数据是
北京市的省份 + 天津市的省份 +.......... 其他全部选中的
重点是河北省的省份 id 和 name 就不需要了 因为没有全部选中
取而代之的是保定市的 id(因为全部选中了)
+ 石家庄市 21 个区县的 id 值
再次点击【按钮】上一行的选中状态是保留的
不过选中的值就不能选中了 禁止选择,只可以在此基础上添加,不如全选唐山市