JQuery-weui city-picker动态加载数据


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>
  1. 查资料
    参考文章 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("");
         $("#camera").picker({
              title: "请选择摄像头",
              cols: [
                   {
                       textAlign: 'center',
                       values: ['前置摄像头']
                   }
              ]
         });
     } else {
         $("#box").empty();
         $("#box").html("");
         $("#camera").picker({
              title: "请选择摄像头",
              cols: [
                   {
                       textAlign: 'center',
                       values: ['前置摄像头', '后置摄像头', '前+后摄像头']
                   }
              ]
         });
     }
});

3.分析city-picker.js源码,增加参数:list-数据源,reload-是否重新加载,initVal-初始化的值,initCode-初始化的value。

  1. 增加参数
	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("");
	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);
}

你可能感兴趣的:(javascript,JQuery)