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>
查资料
参考文章 /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);}
