MUI Picker選擇器 自定義省市地址三級聯動

先來個效果圖展現：

mui框架擴展了pipcker組件,可用於彈出選擇器,在各平臺上都有統一表現.poppicker（適用於彈出單級或多級選擇器）和dtpicker（適用於彈出日期選擇器）是對picker的具體實現

第一步：*poppicker組件依賴mui.picker.js/.css mui.poppicker.js/.css請務必在mui.js/css後中引用,也可統一引用 壓縮版本:mui.picker.min.js

jsp代碼：

<div class="mui-input-row" style="height:auto; width: auto;">
<label>地址</label>
<input type="text" id="pickAddress" style="padding: 0px;margin:0px; display: block;" class="input-address mui-text-right" placeholder="請選擇取件地址" />
</div>

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); }}