仿头条基于jQuery的省市插件应用

在公司的项目中，会遇到很多业务需要我们的开发插件。比如图片上传、地域选择等。现我将在我的项目中开发的基于jQuery的仿头条省市两级插件citySelect分享给大家。

github地址: https://github.com/cangjiamei/citySelect

插件演示

在项目中，城市的插件的功能有省市联动功能，还有比如区域划分一线城市、东北地区等快捷选择功能，如图所示：

插件应用

citySelect是一个可配置化的插件，可以在生成HTML过程中的实现定制。可以通过配置来满足你的要求，定制要先定义一个options，然后传入$().citySelect()构造函数，通过定制options的内容来实现定制。

初始化未选中省市应用实例

github文件的template.html示例

basicData为基础数据源
advancedData为高级设置数据源

	$('.citybox').citySelect({
	     'data':basicData,//基础数据
	     'width':'540px',//插件宽度
	     'clearable':true,//是否加入清除功能
	     'fold':false,//是否收起列表
	     'advanced':{//高级设置
	         'data':advancedData
	     }
	 });

初始化选中省市应用实例

github文件的templateselect.html示例

basicData为基础数据源
advancedData为高级设置数据源
selectData为选中的数据

	$('.citybox').citySelect({
	     'data':basicData,//基础数据
	     'width':'540px',//插件宽度
	     'clearable':true,//是否加入清除功能
	     'fold':false,//是否收起列表
	     'advanced':{//高级设置
	         'data':advancedData
	     }
	     'selectValue':{
	     	'data':selectData
	     }
	 });

1 数据源

指定插件显示的数据。

在插件中，省市对应的基础数据源是必填的。根据业务，可以加入高级设置，并且加入高级设置的数据源。

1.1 基础数据源

对象数组作为数据源，数据的字段名称以及对象数组的格式必须与示例数据源一致。

ps：注意直辖市与其他省份数据的差异。

basicData=
	[
	    {"name":"北京","value":1},
	    {"name":"上海","value":2},
	    {"name":"天津","value":3},
	    {"name":"重庆","value":4},
	    {"name":"安徽","value":17,"city":[{"cityname":"合肥","cityvalue":157},{"cityname":"芜湖","cityvalue":158},{"cityname":"蚌埠","cityvalue":159},{"cityname":"马鞍山","cityvalue":160},{"cityname":"安庆","cityvalue":161},{"cityname":"滁州","cityvalue":162},{"cityname":"阜阳","cityvalue":163},{"cityname":"宿州","cityvalue":164},{"cityname":"六安","cityvalue":166},{"cityname":"淮南","cityvalue":344},{"cityname":"淮北","cityvalue":345},{"cityname":"铜陵","cityvalue":346},{"cityname":"黄山","cityvalue":347},{"cityname":"亳州","cityvalue":348},{"cityname":"池州","cityvalue":349},{"cityname":"宣城","cityvalue":350}]},
	    {"name":"澳门","value":33},
	    ......
	]

如图所示：

1.2 高级设置数据源

对象数组作为数据源，数据的字段名称以及对象数组的格式必须与示例数据源一致。用container字段来进行分组，用于页面的展示。注意：高级设置数据源的省市值与基础数据源的省市值保持一致。

数据源的一个container代表一个大分类，在插件显示的样式中表现为一个分割线内，container内的子数据源代表一个小分类即一项快捷选择。

ps：注意珠江三角洲与港澳台部分数据的差异。

advancedData=
	[	
		{
			'container':
				[
				{"text":"江浙沪","value":[{"name":"浙江","value":7},{"name":"江苏","value":10},{"name":"上海","value":2}]},
               	{"text":"珠三角","value":[{"name":"广东","value":5,"cityname":"广州","cityvalue":50},{"name":"广东","value":5,"cityname":"深圳","cityvalue":51},{"name":"广东","value":5,"cityname":"珠海","cityvalue":52},{"name":"广东","value":5,"cityname":"佛山","cityvalue":54},{"name":"广东","value":5,"cityname":"东莞","cityvalue":58},{"name":"广东","value":5,"cityname":"中山","cityvalue":59},{"name":"广东","value":5,"cityname":"惠州","cityvalue":57},{"name":"广东","value":5,"cityname":"江门","cityvalue":55},{"name":"广东","value":5,"cityname":"肇庆","cityvalue":299}]},
               	{"text":"京津冀","value":[{"name":"北京","value":1},{"name":"天津","value":3},{"name":"河北","value":12}]},
               	{"text":"港澳台","value":[{"name":"香港","value":32},{"name":"澳门","value":33},{"name":"台湾","value":999}]},
               	{"text":"东部沿海","value":[{"name":"北京","value":1},{"name":"天津","value":3},{"name":"河北","value":12},{"name":"辽宁","value":9},{"name":"上海","value":2},{"name":"江苏","value":10},{"name":"浙江","value":7},{"name":"福建","value":11},{"name":"山东","value":16},{"name":"广东","value":5},{"name":"广西","value":18},{"name":"海南","value":19},{"name":"重庆","value":4}]},
			]
		},
		{
			'container':[
				{"text":"华东地区","value":[{"name":"上海","value":2},{"name":"江苏","value":10},{"name":"浙江","value":7},{"name":"安徽","value":17},{"name":"福建","value":11},{"name":"江西","value":28},{"name":"山东","value":16}]},
                {"text":"华南地区","value":[{"name":"广东","value":5},{"name":"广西","value":18},{"name":"海南","value":19},{"name":"香港","value":32},{"name":"澳门","value":33}]},
                {"text":"华中地区","value":[{"name":"河南","value":13},{"name":"湖北","value":26},{"name":"湖南","value":27}]},
                {"text":"华北地区","value":[{"name":"北京","value":1},{"name":"天津","value":3},{"name":"河北","value":12},{"name":"山西","value":21},{"name":"内蒙古","value":20}]},
                {"text":"西南地区","value":[{"name":"四川","value":6},{"name":"云南","value":29},{"name":"贵州","value":8},{"name":"重庆","value":4},{"name":"西藏","value":31}]},
                {"text":"西北地区","value":[{"name":"陕西","value":24},{"name":"甘肃","value":23},{"name":"青海","value":25},{"name":"宁夏","value":22},{"name":"新疆","value":30}]},
                {"text":"东北地区","value":[{"name":"辽宁","value":9},{"name":"吉林","value":14},{"name":"黑龙江","value":15}]},
					]
				},
		},
		......
	]

如图所示：

1.3 选中省市的数据源

对象作为数据源。选中为selectValue配置项。
注意：选中省市的数据源省市对应值与基础数据源的省市值保持一致。

ps：选中值为{选中的省value:选中的市value}
直辖市的话{选中的省value:选中的省value}

selectValue={
             	'data':{
					1: "1", 
					3: "3", 
					11: "109,110,111,112,113,114,115,116,117", 
					12: "35,40"
				},
        	}

如图所示：

2 配置选项列表

在实例化的时候通过参数设置

名称	默认值	描述
data		必须。 citySelect根据基础数据源才可以生成HTML
width	540px	非必须。 最低宽度为540px
clearable	true	非必须。 清除选中的省市
fold	false	非必须。
advanced		非必须。 citySelect根据advanced设置的配置，加入高级设置的advanced.data数据源才可以生成高级设置部分的HTML
selectValue		非必须。 citySelect根据selectValue的配置，加入选中的selectValue.data数据源才可以初始化选中省和市

3 获取选中的值

3.1 获取选中的省市

获取的省市格式为json格式：{省valuse:市value,省valuse:市value}

注意： 当为直辖市时，省市的值保持一致

	$('.cityBox').citySelect().getValue();
	//选中北京、天津、全福建省，河北省石家庄市保定市则值为
	{
		1: "1", 
		3: "3", 
		11: "109,110,111,112,113,114,115,116,117", 
		12: "35,40"
	}

3.2 获取选中全部市的省

获取的省市格式为字符串格式：省,省,省

注意： 当选中为直辖市时，也视为选中全省

	$('.cityBox').citySelect().getProvince();
	//选中北京、天津、全福建省，河北省石家庄市保定市则值为
	1,3,11

3.3 获取选中的市

获取的省市格式为字符串格式：市,市,市

注意： 当选中为直辖市时，也视为选中市

	$('.cityBox').citySelect().getCity();
	//选中北京、天津、全福建省，河北省石家庄市保定市则值为
	1,3,109,110,111,112,113,114,115,116,117,35,40