MUI Picker选择器自定义省市地址三级联动

先来个效果图展示：

mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker（适用于弹出单级或多级选择器）和dtpicker（适用于弹出日期选择器）是对picker的具体实现

第一步：*poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用压缩版本:mui.picker.min.js

jsp代码：

js代码：

//綁定地址
$('.input-address').each(function(i,obj){
obj.addEventListener('tap',function(){

//初始化picker多列选择器，并以三列显示
var picker = new $.PopPicker({ layer: 3 });
picker.setData(${addressJSON});
picker.show(function(rs){
obj.value=rs[2].text;
picker.dispose();
});
},false);
});

controller层：

// 取件地址选择

public ModelAndView indexPage() {
ModelAndView modelView = new ModelAndView();

List<AddressVO> addressList = addressService.findVOListByExample();
List<PickerData> addressData = new ArrayList<>();
List<PickerData> addressData2;
String p = "";
String c = "";
for (ExpressPickAddressVO expressPickAddressVO : expressPickAddressList) {

//判断省份是否重复
if (!addressVO.getProvince().equals(p)) {
PickerData province = new PickerData(addressVO.getProvince(), addressVO.getProvince());
addressData.add(province);
p = addressVO.getProvince();
}

//判断市是否重复
if (!addressVO.getCity().equals(c)) {
PickerData city = new PickerData(addressVO.getCity(), addressVO.getCity());
addressData.get(addressData.size() - 1).addChild(city);
c = addressVO.getCity();
addressData2 = new ArrayList<>();
PickerData address = new PickerData(addressVO.getAddressId(), addressVO.getAddress());
addressData2.add(address);
city.setChildren(addressData2);
}
}
modelView.addObject("addressJSON",JSON.toJsonString(addressData)); ---------------->把addressData集合转为JSON格式返回给页面,在此我用的是fastjson

}

还有一个辅助PO

PickerData：

public class PickerData {
private String value;
private String text;
private List<PickerData> children;

public PickerData() {
}

public PickerData(String value, String text) {
setValue(value);
setText(text);
}

public String getValue() {
return value;
}

public void setValue(String value) {
this.value = value;
}

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}

public List<PickerData> getChildren() {
return children;
}

public void setChildren(List<PickerData> children) {
this.children = children;
}

public void addChild(PickerData data) {
if (this.children == null) {
this.children = new ArrayList<PickerData>();
}
this.children.add(data);
}
}

MUI Picker选择器 自定义省市地址三级联动

MUI Picker选择器自定义省市地址三级联动