三级地区选择插件LArea.js设置默认地区数据的方法

2017-09-01 17:06 栏目:技术开发 查看(9804)

微构网络团队在开发新一个移动商城项目的时候,负责个人中心模块的小伙伴说这个类库比之前我们自己直接写的方案体验更好些,其他的小伙伴看了一下还真是的,因为这个插件体验非常接近IOS原生体验(当然流畅度上还是不如原生的)。但这个同学说但是我在编辑的时候怎么办啊,比如说一个收货地址,原来已经选择了湖南省—长沙市—芙蓉区,那么编辑的时候总不让还来重新选择吧。

有一个小伙伴说人家京东也是这样的,编辑的时候不管之前选了那座城市的哪个区,编辑必须重新从北京开始选择。马上被我怼了回去,总不能看人家没做好这个体验就放弃吧,你都还没开始研究就放弃,跟咱们团队的文化不相符啊。其实在LArea.js插件中预留了关于默认值设置的API。

比如我们使用var area=new LArea();得到一个对象,那么我们可以使用以下代码来设置插件初始化的地区选择值:

area.value=[x,y,z];

其中的x、y、z就是三级地区当前所在的索引(我们可以理解我第几条,默认从0开始),比如x=0的时候,默认肯定就是北京啦(第一个嘛)。这时候有人可能会想,就算我知道现在我选择的是湖南省—长沙市—芙蓉区,但我也不知道对应的x、y、z的值啊。其实这就是JavaScript基础问题啦,比如当type=2时,我们可以通过遍历数据源的json数据来得到x、y、z,如下就是最基础的代码(加上就是默认的数据源,省、市、区三级数据分别赋给provs_data、 citys_data、dists_data这三个变量,这也是插件默认数据包的样子):

for(var i in provs_data){
	if(provs_data[i].text=='湖南省'){
	    var x=i;
	    var city=citys_data[provs_data[i].value];
	    for(var j in city){
			if(city[j].text=='长沙市'){
				var y=j;
				var district=dists_data[city[j].value];
				for(var k in district){
					if(district[k].text=='芙蓉区'){
						var z=k;
					}
				}
			}
	    }
	}
}

通过以上可以得到x=17,y=0,z=1,然后通过上述设置,那么就可以实现默认就选择湖南省—长沙市—芙蓉区,而不用用户从北京开始选择,这样就可以极大的节省用户的操作时间,提高用户体验。当然实际上我们可以做进一步的优化处理,使得更加优雅和稳健、性能更加高效。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:三级地区选择插件LArea.js设置默认地区数据的方法 - 微构网络
分享: