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);
}
}
转载于:https://www.cnblogs.com/ljh-/p/9228207.html
MUI Picker选择器 自定义省市地址三级联动相关推荐
- 实现微信小程序picker 省市区 自定义数据 支持三级联动
再使用微信小程序时 发现 当 mode="region" 时数据 选择的省市区的数据不支持后台返回的数据 以下实现后台返回数据操作 先设置HTML name 字段名字要替换掉 ...
- 基于layui实现的省市县区三级联动下拉选择器
基于layui实现的省市县区三级联动下拉选择器 关于layui 这里不做介绍,直戳我阅读 关于本省市区级联下拉选择器 本选择器已经将它封装成一个layui的插件,使用起来非常方便,支持一个页面中使用多 ...
- vue引用自定义.js文件 (常量抛出 + 地址三级联动为例)- 语法篇
文章目录 vue如何引用`自定义封装的` `.js`文件? `如何操作,详细如下.`(注意代码注释部分:注意1/2/3/4/5) 一.效果图预览: 二.以自定义`area.min.js`文件为例: 三 ...
- layui的插件,省市县区三级联动下拉选择器
layui的插件,省市县区三级联动下拉选择器 https://fly.layui.com/extend/layarea/#download
- weui实现移动端地址三级联动,基于js
主要方法 weui.picker(array,{defaultValue: [],//对应选项的值onChange: function (result) {console.log(result)},o ...
- 【案例】城市地址三级联动
注意点: 1.<option value=""></option> value值的设置 2.select的onchange事件 <!DOCTYP ...
- 全国全国各个省市数据库 三级联动 无刷新数据库
全国全国各个省市数据库 三级联动 无刷新数据库 --创建DBPromary数据库 create database DBPromary use DBPromary go --创建promary ...
- android studio 测试地址三级联动的时候 json数据太长 提示错误: 常量字符串过长
在项目中应用地址三级联动的时候 因为测试给了一大窜的json数据 就在项目中创建了一个常量 保存这个json 然后在专程bean 去应用 但是提示错误: 常量字符串过长 于是该用jso ...
- 原生js封装picker地址三级联动方法
地址三联动 电商平台等需要用户填写地址的应用都需要用到这个插件:网上也有很多这样的插件:但是项目中使用难免有需要改动的地方:所以自己封装的才是最匹配的: //地址选择器 /**** @param {f ...
- vue学习之mintui picker选择器实现省市二级联动
Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:https://mint-ui.github.io/docs/#/zh- ...
最新文章
- 【深度学习基础】经典卷积神经网络
- php7 v8js,Centos 7PHP7.0 安装V8JS扩展几乎都能安装成功
- Linux中使用Linux的vim如何让代码高亮显示
- LeetCode 解题报告索引
- Android开发之Android5.1.1(CM12.1)源码中短信发送流程解析
- 开发物体识别桌、_想用人工智能实现安全风险管控?快来试试EasyMonitor一站式视频监控开发平台...
- hotmail_在新的Hotmail Wave 4中禁用Messenger
- 部署kafka kafka的service容器和zookeeper kafka客户端 Elasticsearch的客户端
- 第二阶段团队绩效考核报告
- 再见安卓 你好鸿蒙,安卓,再见!你好,鸿蒙系统!
- ansys里面自带chemkin_ANSYS CFD原来还有这么多功能,初学者都进来了解
- 基于T4模板的文档生成
- html超浪漫的3D动态相册表白网站制作 html程序员专属情人节表白网站
- Linux线程详解(概念、原理、实现方法、优缺点)
- 抽象代数基础教程(a first course in abstract algebra) 英文版 pdf下载
- 苹果cmsV10简约白色风格自适应模板
- 毕业季,让我来教你如何快速给论文进行排版
- Camrea测试-- CTS测试
- java找最长连续号段,字符串—寻找最长连续子串
- 江西应用技术职业学院计算机协会,江西应用技术职业学院47个学生社团陆续召开动员大会...