【JavaWeb】jQuery WeUI框架 地址选择器 City-Picker 自定义demo
jQuery WeUI City-Picker Demo：http://www.jqweui.cn/extends#city-picker
官方的city-picker提供了两种样式：
（1）省级-市级-区级
（2）省级-市级（不显示区级）
前端页面要引入的JS、CSS文件如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><!--控制页面自动适应屏幕大小--><meta charset="UTF-8" name="viewport"content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>BORN TO LOVE</title><link rel="shortcut icon" href="#"><!--JQuery--><script type="text/javascript" charset="UTF-8" src="resources/scripts/jquery-3.3.1.min.js"></script><!--JQuery WEUI--><script type="text/javascript" charset="UTF-8" src="resources/scripts/jquery-weui.min.js"></script><script type="text/javascript" charset="UTF-8" src="resources/scripts/fastclick.js"></script><script type="text/javascript" charset="UTF-8" src="resources/scripts/city-picker.js"></script><!--WeUI CSS--><link rel="stylesheet" type="text/css" href="resources/css/weui.css"><link rel="stylesheet" type="text/css" href="resources/css/jquery-weui.css">
</head>最近开发的应用有一个新的需求，由于是在湖北省内使用，要求不显示“湖北省”，只选择市级-区级，而且地址名称需要自定义。
因此这里需要解决两个问题：
#1-> 如何只显示两级“市级-区级”？
#2-> 如何实现city-picker数据源动态加载，即数据自定义的问题？
在解决上述问题之前，我们先看看[city-pcker.js]里的源数据是如何组织的吧 ^^。
[city-pcker.js] 里的源数据是按JSON格式组织的 rawCitiesData ，例如“湖北省-武汉市-武昌区”的组织结构如下所示。
$.rawCitiesData = [{"name":"湖北省","code":"420000","sub":[{"name":"武汉市","code":"420100","sub":[{"name":"武昌区","code":"420106"},]},...]}
]现在来解决第一个问题，如何只显示“市级-区级”，不显示“省级”。
思路1：参照官网不显示区级的做法
直接在 city-picker.js 修改 defaults = $.fn.cityPicker.prototype.defaults 增加 showProvince: true
defaults = $.fn.cityPicker.prototype.defaults = {showDistrict: true, //是否显示地区选择showProvince: true //是否显示省份选择};前端页面初始化添加 showProvice: false
$("#home-city").cityPicker({title: "选择目的地",showProvince: false, //不显示省级onChange: function (picker, values, displayValues) {console.log(values, displayValues);}});但是，并没有达到想要的效果，没有任何影响。
原因是这里相当于只是写了一个属性名，必须自定义完善对应的方法，相当于要参照showDistrict的方法写一套处理showProvince的方法，虽然确实可以实现，但必须要读懂 city-picker.js 源码再进行相应的修改，对小白来说太不友好了。
比如下图展示了源码中涉及到showDistrict的所有地方，如果要改showProvince只会更麻烦，因为省份默认是带sub子节点的，这个结构注定了可以向下追溯，没法直接从中间节点向上追溯的，感兴趣的大神可以自行考虑如何改写这个逻辑代码。
思路2：严格按照 rawCitiesData 的JSON格式重新组织数据源
原始数据：“湖北省” - “武汉市” - “武昌区”
改写数据：“武汉市” - “武昌区” - null
{"name": "武汉市","code": "420100","sub": [{"name": "武昌区","code": "420106","sub": []}]
}页面再按照不显示区级的方法初始化city-picker
$("#home-city").cityPicker({title: "选择目的地",showDistrict: false,onChange: function (picker, values, displayValues) {console.log(values, displayValues);}});<body></body>
<h2 class="demos-second-title">只选择城市</h2>
<div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="home-city" class="weui-label">城市</label></div><div class="weui-cell__bd"><input class="weui-input" id="home-city" type="text" value="武汉市 武昌区"></div></div>
</div>需要强调的是，这里的<input>必须初始化value值，不然会报错
报错原因分析：
原始的 city-picker.js 里有一段代码
//计算value
var val = $(this).val();
if (!val) val = '北京 北京市 东城区';
currentProvince = val.split(" ")[0];
currentCity = val.split(" ")[1];
currentDistrict = val.split(" ")[2];这段代码的意思是取input框的value值，如果value为空则赋值为“北京 北京市 东城区”，并初始化picker的三层选择框的省份为“北京”、城市为“北京市”、地区为“东城区”，当点击这个input框的时候，初始的选择值就是“北京 北京市 东城区”。但是我们之前已经把 rawCitiesData 进行了重写，只保留了武汉市的数据，因此如果input不初始化value值，控件找不到这个值，自然会报错。
解决方式主要有两种：
一种是直接给input赋值初始value，另一种就是在city-picker.js里修改上面那段代码。
需要注意的是value值必须是 rawCitiesData 中初始化的值，不然也会报错。
//计算value
var val = $(this).val();
if (!val) val = '武汉 武昌区';
currentProvince = val.split(" ")[0];
currentCity = val.split(" ")[1];
currentDistrict = val.split(" ")[2];演示效果：
现在来解决第二个问题， 如何动态加载数据源，可以自定义数据，满足个性化需求。
#-> 思路：
要自定义显示的数据，直接修改 city-picker.js 里的 rawCitiesData 就行了。
一种方式，自己按照 rawCitiesData 的JSON格式组织自己要的数据，然后粘贴复制替换掉原来的rawCitiesData 就行。这种方式比较适合数据量比较小，且固定后期变动比较小的情况，优点是修改直观且简单粗暴。
另一种方式就是实现动态加载数据源，通过外部传参的方式初始化数据源，数据源可通过ajax的方式去后台数据库查询，然后组织成对应的JSON格式返回前端。这种方式就比较适合数据量比较大且后期数据变动较大的情况，优点是维护方便。
#-> 实现：
首先，我们来看看 city-picker.js 源码是如何对数据源进行操作的。
其实很简单，就是设置了一个变量 raw ，然后初始化赋值成数据源 rawCitiesData 。有点类似一个类Class里直接给属性赋值初始化的过程，如果要动态修改这个属性的值，我们通常会增加 set 方法，所以这里也是一样的道理，可以给 raw 也增加一个 set 方法，实现动态修改 raw 的值。
// 初始化赋值成空
var raw = [];
// 新增set方式为raw赋值
var setRawDataList= function (raw_data_list) {raw = raw_data_list;
}和构造函数设置参数一样，这里 set 方法里传入的参数 raw_data_list 也需要修改默认参数设置，新增一个参数 initDataList ，用于接收外部数据源。
defaults = $.fn.cityPicker.prototype.defaults = {showDistrict: true, //是否显示地区选择initDataList: [] //加载数据源-参数设置
};最后在 city-picker 初始化的时候为 raw 进行赋值操作，在 $.fn.cityPicker = function (params) {}里新增如下代码，params.initDataList 就是刚刚在defaults里设置的新增参数。
$.fn.cityPicker = function (params) {params = $.extend({}, defaults, params);return this.each(function () {var self = this;// 根据外部传入的参数为raw赋值if(params.initDataList != null && params.initDataList.length > 0 ){setRawDataList(params.initDataList);}... // 其他代码不变}主要修改的就只有三个地方，如下图所示
至此，city-picker.js 修改完毕。
前端<input>html
<h2 class="demos-second-title">请选择目的地</h2>
<div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="home-city" class="weui-label">城市</label></div><div class="weui-cell__bd"><input class="weui-input" id="home-city" type="text"></div></div>
</div>city-picker初始化，datalist可以通过ajax去后台获取，这里为了演示方便直接写出来了，另外需要注意的是JSON数据要加“[ ]”。
<script>// 注意要加[] -- datalist可以通过ajax去后台查询数据库获取let datalist = JSON.parse("[{\n" +" \"name\": \"武汉市\",\n" +" \"code\": \"420100\",\n" +" \"sub\": [\n" +" {\n" +" \"name\": \"市辖区\",\n" +" \"code\": \"420101\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"江岸区\",\n" +" \"code\": \"420102\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"江汉区\",\n" +" \"code\": \"420103\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"硚口区\",\n" +" \"code\": \"420104\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"汉阳区\",\n" +" \"code\": \"420105\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"武昌区\",\n" +" \"code\": \"420106\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"青山区\",\n" +" \"code\": \"420107\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"洪山区\",\n" +" \"code\": \"420111\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"东西湖区\",\n" +" \"code\": \"420112\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"汉南区\",\n" +" \"code\": \"420113\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"蔡甸区\",\n" +" \"code\": \"420114\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"江夏区\",\n" +" \"code\": \"420115\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"黄陂区\",\n" +" \"code\": \"420116\",\n" +" \"sub\": []\n" +" },\n" +" {\n" +" \"name\": \"新洲区\",\n" +" \"code\": \"420117\",\n" +" \"sub\": []\n" +" }\n" +" ]\n" +" }]");$("#home-city").cityPicker({title: "选择目的地",// showProvince: false,showDistrict: false,initDataList: datalist,onChange: function (picker, values, displayValues) {console.log(values, displayValues);}});</script>--- 20200724 --- 更新 ----------------------------------
#-> 自定义打开滚动框时的默认选中值
整体修改思路和上面自定义数据源的方式类似，把默认值改成外部自定义输入即可，添加相应的set方法完成赋值。
分析city-picker.js源代码，打开滚动框设定默认值的代码是这一行，因此需要修改这里的val为外部输入的变量值。
var val = $(this).val();
if (!val) val = '湖北 武汉 武昌区';在defaults设置里新增一个默认外部输入变量 initCityShowValue
defaults = $.fn.cityPicker.prototype.defaults = {initCityShowValue: "" //设置滚动框显示的默认值
};给新变量 showval 新增set方法 setShowValue()
// 初始化赋值成""
var showval = "";
// 新增set方式为showval赋值
var setShowValue = function (show_value) {showval = show_value;
}通过set方法将外部传入的参数 params.initCityShowValue 赋值给 showval
$.fn.cityPicker = function (params) {params = $.extend({}, defaults, params);return this.each(function () {var self = this;// 根据外部传入的参数为showval赋值if(params.initCityShowValue !== "" && params.initCityShowValue.length > 0 ){setShowValue(params.initCityShowValue);}
}最后修改原来的默认值为我们新增的这个变量值 showval 即可
if (!val) val = showval;前端初始化的时候，通过指定 initCityShowValue 的值即可
$("#destination").cityPicker({title: "请选择出差地点",// showDistrict: false,initCityShowValue: "武汉 江岸 个险",onChange: function (picker, values, displayValues) {console.log(values, displayValues);console.log("values:" + values);console.log("displayValues:" + displayValues[0] + " " + displayValues[1] + " " + displayValues[2]);}
});参考：https://blog.csdn.net/weixin_41913378/article/details/103175157
【JavaWeb】jQuery WeUI框架 地址选择器 City-Picker 自定义demo相关推荐
- jQuery WeUI 上传
jQuery WeUI 是专为微信公众账号开发而设计的一个框架,jQuery WeUI的官网:http://jqweui.com/ 需求:需要在微信公众号网页添加上传图片功能 技术选型:实现上传图片功 ...
- 利用微信的weui框架上传、预览和删除图片
jQuery WeUI 是专为微信公众账号开发而设计的一个框架,jQuery WeUI的官网:http://jqweui.com/ 需求:需要在微信公众号网页添加上传图片功能 技术选型:实现上传图片功 ...
- MUI 地址选择器 - picker使用
MUI 地址选择器 - picker使用 很多安卓原生的地址选择器中,选择器基本是实时滚动的. 就像腾讯QQ应用的地址选择器一样! 效果截图如下: 代码如下: <!DOCTYPE html> ...
- Web前端UI框架 JQuery WeUI
获取JQueryUI http://jqweui.com/ jQuery WeUI 是 WeUI 的一个 jQuery 实现版本,除实现了官方插件之外,它还提供了如下拉刷新.日历.地址选择器等丰富的拓 ...
- jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- 关于使用jquery weui的picker部分遇到的问题及解决办法
关于使用jquery weui的picker部分遇到的问题及解决办法 本人在使用jquery weui制作app项目时,遇到[picker][6]部分,按钮点击触发事件时发生的问题,在这里把它记录下来 ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- 移动端框架之JQuery WeUI
和JQuery WeUI 配合使用的WeUI,是移动端快速开发的利器. 在初步使用的过程中,发现JQuery WeUI扩展的几个功能特别实用: 1.通知:模仿iOS风格的通知.你可以自定义标题,文案和 ...
- jq-weui滚动刷新，日历，和地址选择器
最近工作方面的原因,接触到了微信公众号.然后网上找资料发现了jq-weui这个框架,觉得特别不错,分享一下 下载jq-weui点击这里下载jquery-weui,这里一定要注意下载的版本.因为有些功能 ...
最新文章
- MARKET1501的学习，跟着苏同学的博客学习
- 【代码示例】 一个简单的Java死锁
- Spring Boot-@Configuration注解
- 认知无线电matlab代码详解,认知无线电频谱感知之功率检测matlab代码.docx
- java集合框架（set）
- RocketMQ开发指导之二——RocketMQ部署
- 计算机原理及应用课程,课程描述
- 鸿蒙2.0内测版手机版,不再遮遮掩掩，鸿蒙2.0测试版下月发布，用于手机内测
- TabLayout的自定义
- Another Redis DeskTop Manager：一款可视化的Redis管理工具
- 税控盘是服务器系统,税控盘系统设置服务器地址
- matlab画倾斜的椭球_用matlab绘制椭球体x^2/4+y^2/9+z^2/16=1,并通过改变观察点获得它在各个坐标面上的投影。...
- 中关村买手机上当案例
- form 表单提交后，使页面不跳转
- PDF转成Word或PPT后还是图片是怎么回事？
- Oracle数据库中神奇的dual表
- 台式机安装EXSI，通过官方方式定制安装包
- P5.JS绘制动态图形
- OPEN(SAP) UI5 学习入门系列之二： 最佳实践练习（下）
- 欢迎注册和登陆我们的学海灯塔