现在很多的app,尤其是电商类的app在添加地址功能里面一般都会使用地址的三级联动,那么它是怎么实现的呢?其实很简单,现在简单的介绍一下使用第三方的依赖来实现三级联动的效果.
梅州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!
1.开始编写
1).在module的build.gradle文件中的dependencies节点里面添加这样一行代码引入依赖
[html] view plain copy
compile 'com.bigkoo:pickerview:2.0.8'
2).项目的目录结构
包括assets资产目录,三个类文件,分别是activity的代码逻辑类,省份的实体类以及获取省份信息json字符串的工具类.
3)实体类编写如下:
[java] view plain copy
public class AddressBean {
public String name;
public AddressBean(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPickerViewText() {
//这里是固定写法,依赖库会根据集合内容使用反射显示文本到省份栏的文本框中
return this.name;
}
@Override
public String toString() {
return "AddressBean{" +
"name='" + name + '\'' +
'}';
}
}
4).获取json字符串的工具类代码
[html] view plain copy
/**
* Created by yangtao on 2016/12/11.
* 从资产目录中获取json字符串
*/
public class JsonUtils {
public static String getJsonString(Context context,String name){
ByteArrayOutputStream baos = new ByteArrayOutputStream();
AssetManager am = context.getAssets();
try {
InputStream inputStream = am.open(name);
byte[] buffer = new byte[1024];
int len =0;
while((len = inputStream.read(buffer)) != -1){
baos.write(buffer,0,len);
}
} catch (IOException e) {
e.printStackTrace();
}
return baos.toString();
}
}
5)MainActivity中的代码实现
[java] view plain copy
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import com.bigkoo.pickerview.OptionsPickerView;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TextView tv_address;
private ArrayListAddressBean provinceList = new ArrayList();//创建存放省份实体类的集合
private ArrayListString cities ;//创建存放城市名称集合
private ArrayListListString citiesList= new ArrayList();//创建存放城市名称集合的集合
private ArrayListString areas ;//创建存放区县名称的集合
private ArrayListListString areasList ;//创建存放区县名称集合的集合
private ArrayListListListString areasListsList = new ArrayList();//创建存放区县集合的集合的集合
private OptionsPickerView mPvOptions;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv_address = (TextView) findViewById(R.id.tv_address);
//获取json字符串,用来解析以获取集合
String jsonString = JsonUtils.getJsonString(MainActivity.this,
"province_data.json");
//解析json字符串,向各级集合中添加元素
parseJson(jsonString);
mPvOptions = new OptionsPickerView(this);
//设置三级联动的效果
mPvOptions.setPicker(provinceList,citiesList,areasListsList,true);
//设置可以循环滚动,true表示这一栏可以循环,false表示不可以循环
mPvOptions.setCyclic(true,false,false);
//设置默认选中的位置
mPvOptions.setSelectOptions(0,0,0);
mPvOptions.setOnoptionsSelectListener(new OptionsPickerView.OnOptionsSelectListener() {
@Override
public void onOptionsSelect(int options1, int option2, int options3) {
//返回的分别是三个级别的选中位置
String city = provinceList.get(options1).getPickerViewText();
String address;
// 如果是直辖市或者特别行政区只设置市和区/县
if ("北京市".equals(city) || "上海市".equals(city) || "天津市".equals(city) || "重庆市".equals(city) || "澳门".equals(city) || "香港".equals(city)) {
address = provinceList.get(options1).getPickerViewText()
+ " " + areasListsList.get(options1).get(option2).get(options3);
} else {
address = provinceList.get(options1).getPickerViewText()
+ " " + citiesList.get(options1).get(option2)
+ " " + areasListsList.get(options1).get(option2).get(options3);
}
tv_address.setText(address);
Toast.makeText(MainActivity.this,"我被点击了",Toast.LENGTH_LONG).show();
}
});
//点击文本框的时候,显示地址选择框
tv_address.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mPvOptions.show();
}
});
}
//解析获得的json字符串,放在各个集合中
private void parseJson(String json){
try {
//得到一个数组类型的json对象
JSONArray jsonArray = new JSONArray(json);
for (int i = 0; i jsonArray.length(); i++) {//对数组进行遍历得到每一个jsonobject对象
JSONObject provinceObject = (JSONObject) jsonArray.get(i);
String provinceName = provinceObject.getString("name");//得到省份的名字
provinceList.add(new AddressBean(provinceName));//向集合里面添加元素
JSONArray cityArray = provinceObject.optJSONArray("city");
cities = new ArrayList();//创建存放城市名称集合
areasList = new ArrayList();//创建存放区县名称的集合的集合
for (int j = 0; j cityArray.length(); j++) {//遍历每个省份集合下的城市列表
JSONObject cityObject = (JSONObject) cityArray.get(j);
String cityName = cityObject.getString("name");
cities.add(cityName);//向集合里面添加元素
JSONArray areaArray = cityObject.optJSONArray("area");
areas = new ArrayList();//创建存放区县名称的集合
for (int k = 0; k areaArray.length(); k++) {
String areaName = areaArray.getString(k);
areas.add(areaName);
}
areasList.add(areas);
}
citiesList.add(cities);
areasListsList.add(areasList);
}
} catch (JSONException e) {
e.printStackTrace();
}
}
}
那就给你说下二级联动吧 ,三级道理也是一样的。
根据第一级下拉框,点击事件后,将id传递给服务器,服务器根据该id,经过数据库查询,获得二级下拉框的内容,这里的内容你可以用xml封装,或者是直接写成dom格式:如dom格式
服务端:
PrintWriter writer = response.getWriter();
writer.println("select");
while(rs.next()){
writer.println("option"+rs.getString("xxx")+"/option");
writer.flush();
}
writer.println("/select");
writer.close();
客户端:
var selectStr=xmlHttp.responseText;//二集菜单的内容
找个元素,将二级菜单项利用innerHTML插入到网页中
document.getElementById("xx").innerHTML=selectStr;
不知道这样说你明白不?
实现第三级,只需要在第二个下拉框里触发事件后,将id传递给服务器,在经过处理,将结果给第三级下拉框
后台能够打印出来,说明没有问题。问题应在前边的接收端。看代码返回的是json string,对于前端来说应该仅仅是个string,而不是JS对象。
记得JQuery,发送request的时候有参数,可以自动把返回的json string变成js的object的。