先来个效果图展示:

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

转载于:https://www.cnblogs.com/ljh-/p/9228207.html

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

  1. 实现微信小程序picker 省市区 自定义数据 支持三级联动

    再使用微信小程序时 发现 当 mode="region"   时数据 选择的省市区的数据不支持后台返回的数据 以下实现后台返回数据操作 先设置HTML name 字段名字要替换掉 ...

  2. 基于layui实现的省市县区三级联动下拉选择器

    基于layui实现的省市县区三级联动下拉选择器 关于layui 这里不做介绍,直戳我阅读 关于本省市区级联下拉选择器 本选择器已经将它封装成一个layui的插件,使用起来非常方便,支持一个页面中使用多 ...

  3. vue引用自定义.js文件 (常量抛出 + 地址三级联动为例)- 语法篇

    文章目录 vue如何引用`自定义封装的` `.js`文件? `如何操作,详细如下.`(注意代码注释部分:注意1/2/3/4/5) 一.效果图预览: 二.以自定义`area.min.js`文件为例: 三 ...

  4. layui的插件,省市县区三级联动下拉选择器

    layui的插件,省市县区三级联动下拉选择器 https://fly.layui.com/extend/layarea/#download

  5. weui实现移动端地址三级联动,基于js

    主要方法 weui.picker(array,{defaultValue: [],//对应选项的值onChange: function (result) {console.log(result)},o ...

  6. 【案例】城市地址三级联动

    注意点: 1.<option value=""></option>    value值的设置 2.select的onchange事件 <!DOCTYP ...

  7. 全国全国各个省市数据库 三级联动 无刷新数据库

    全国全国各个省市数据库 三级联动 无刷新数据库 --创建DBPromary数据库   create  database  DBPromary use  DBPromary go --创建promary ...

  8. android studio 测试地址三级联动的时候 json数据太长 提示错误: 常量字符串过长

    在项目中应用地址三级联动的时候  因为测试给了一大窜的json数据   就在项目中创建了一个常量  保存这个json  然后在专程bean  去应用   但是提示错误: 常量字符串过长 于是该用jso ...

  9. 原生js封装picker地址三级联动方法

    地址三联动 电商平台等需要用户填写地址的应用都需要用到这个插件:网上也有很多这样的插件:但是项目中使用难免有需要改动的地方:所以自己封装的才是最匹配的: //地址选择器 /**** @param {f ...

  10. vue学习之mintui picker选择器实现省市二级联动

    Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:https://mint-ui.github.io/docs/#/zh- ...

最新文章

  1. 【深度学习基础】经典卷积神经网络
  2. php7 v8js,Centos 7PHP7.0 安装V8JS扩展几乎都能安装成功
  3. Linux中使用Linux的vim如何让代码高亮显示
  4. LeetCode 解题报告索引
  5. Android开发之Android5.1.1(CM12.1)源码中短信发送流程解析
  6. 开发物体识别桌、_想用人工智能实现安全风险管控?快来试试EasyMonitor一站式视频监控开发平台...
  7. hotmail_在新的Hotmail Wave 4中禁用Messenger
  8. 部署kafka kafka的service容器和zookeeper kafka客户端 Elasticsearch的客户端
  9. 第二阶段团队绩效考核报告
  10. 再见安卓 你好鸿蒙,安卓,再见!你好,鸿蒙系统!
  11. ansys里面自带chemkin_ANSYS CFD原来还有这么多功能,初学者都进来了解
  12. 基于T4模板的文档生成
  13. html超浪漫的3D动态相册表白网站制作 html程序员专属情人节表白网站
  14. Linux线程详解(概念、原理、实现方法、优缺点)
  15. 抽象代数基础教程(a first course in abstract algebra) 英文版 pdf下载
  16. 苹果cmsV10简约白色风格自适应模板
  17. 毕业季,让我来教你如何快速给论文进行排版
  18. Camrea测试-- CTS测试
  19. java找最长连续号段,字符串—寻找最长连续子串
  20. 江西应用技术职业学院计算机协会,江西应用技术职业学院47个学生社团陆续召开动员大会...

热门文章

  1. php模拟登录其他网站,PHP利用Curl模拟登录并获取数据例子
  2. Spark 学习笔记01
  3. Pandas 读取 csv 得 DataFrame 转换成 List
  4. python isinstance(object, classinfo)
  5. pytorch数据集
  6. 如何使用Python开发随机森林集成
  7. Sublime Text SFTP 注册码
  8. git 设置忽略文件类型 gitignore
  9. java提前多久显示,Java当前日期/时间比原始时间提前1小时显示
  10. Unity脚本的生命周期