先来个效果图展示:
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);
}
}