JQuery-weui city-picker动态加载数据
-
JQuery-weui city-picker 加载三级菜单
页面代码：
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-weui.js"></script>
<script type="text/javascript" src="city-picker.js"></script>
<link rel="stylesheet" href="jquery-weui.css">
<link rel="stylesheet" href="weui3.css">
<script type="text/javascript">
var cityArr;
function init(){
//第一次初始化，这里直接写静态的(实际这个数组可以通过ajax获取)
cityArr = [{"name":"北京","code":"100000"},{"name":"河北省","code":"200000"},{"name":"河男省","code":"300000"}];
cityArr[0].sub=[{"name":"北京市","code":"100100"}];
cityArr[1].sub=[{"name":"承德市","code":"200100"},{"name":"邢台市","code":"200200"}];
cityArr[2].sub=[{"name":"承市","code":"200200"},{"name":"邢台市","code":"200210"}];
cityArr[0].sub[0].sub=[{"name":"朝阳区","code":"100101"},{"name":"朝阳2","code":"100102"},{"name":"朝阳3","code":"100103"}];
cityArr[1].sub[0].sub=[{"name":"双桥区","code":"200101"}];
$(".city-picker").val("北京 市辖区 朝阳区");
$(".city-picker").attr("data-values","100000,100100,100101");
$(".city-picker").cityPicker({
onOpen:function(){
$(".mask").show()
},
onClose:function(){
$(".mask").hide()
},
title: "请选择地区",
list:cityArr
});
}
function search(){
//第二次加载，这里直接写静态的(实际这个数组可以通过ajax获取)
cityArr = [{"name":"广东省","code":"600000"}];
cityArr[0].sub=[{"name":"广州市","code":"600100"}];
cityArr[0].sub[0].sub=[{"name":"天河区","code":"600101"},{"name":"白云区","code":"600102"},{"name":"黄埔","code":"600103"}];
$(".city-picker").val("广东省 广州市 天河区");
$(".city-picker").attr("data-values","600000,600100,600101");
$(".city-picker").cityPicker({
list:cityArr,
reload:true,
initVal:"广东省 广州市 天河区",
initCode:"600000,600100,600101"});
}
</script>
</head>
<body onload="init();">
<div>
<select onchange="search();">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div id="city-picker">
<input type="text" placeholder="请选择地区" class="city-picker">
</div>
<!-- 中间内容结束 -->
<div class='mask'></div>
<script>
$(".city-picker").cityPicker({
onOpen:function(){
$(".mask").show()
},
onClose:function(){
$(".mask").hide()
},
title: "请选择地区"
});
</script>
</body>
</html>
-
查资料
参考文章 https://blog.csdn.net/xjun0812/article/details/80663424中的代码
/*js部分，myPicker是设备号input的ID*/
$('#myPicker').change(function () {
/*选择设备号后,根据当前设备号设置不同的摄像头选项,具体判断逻辑根据具体的项目而定*/
var val = $("#myPicker").val();
if (val === "*******352") {
$("#box").empty();
$("#box").html("<input type='text' id='camera' value='前置摄像头'/>");
$("#camera").picker({
title: "请选择摄像头",
cols: [
{
textAlign: 'center',
values: ['前置摄像头']
}
]
});
} else {
$("#box").empty();
$("#box").html("<input type='text' id='camera' value='前置摄像头'/>");
$("#camera").picker({
title: "请选择摄像头",
cols: [
{
textAlign: 'center',
values: ['前置摄像头', '后置摄像头', '前+后摄像头']
}
]
});
}
});
3.分析city-picker.js源码，增加参数：list-数据源，reload-是否重新加载，initVal-初始化的值，initCode-初始化的value。
- 增加参数
defaults = $.fn.cityPicker.prototype.defaults = {
showDistrict: true, //是否显示区
list:[], //数据源
reload:false, //是否重新加载
initVal:"", //初始化的值
initCode:"" //初始化的value
};
2.增加方法给数据源赋值
//将raw的值干掉
var raw = [];
//增加方法给raw赋值
var setList = function(data){
raw = data;
}
//city-picker调研的时候给raw赋值
$.fn.cityPicker = function(params) {
params = $.extend({}, defaults, params);
return this.each(function() {
var self = this;
//根据参数给raw赋值
if(params.list != null && params.list.length>0){
setList(params.list);
}
//后续代码就不截了
.
.
.
3.发现jquery-weui的city-picker是在JQuery weui picker的基础上开发的，修改调用方式
if(params.reload){
$("#city-picker").empty();
$("#city-picker").html("<input type='text' placeholder='请选择地区' class='city-picker'>");
if(params.initVal != null && params.initVal != ""){
$(".city-picker").val(params.initVal);
$(".city-picker").attr("data-values",params.initCode);
}
$(".city-picker").picker(p);
}else{
$(this).picker(p);
}