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);
}

JQuery-weui city-picker动态加载数据相关推荐

jqweui的picker动态加载数据
大家好,我是烤鸭: jqweui的picker动态加载数据 jqweui是jquery对weui的拓展开发,picker就是其中的一个拓展组件, 1. 先附上官网显示地址和代码: http:// ...
ajax 技术动态加载数据,jQuery结合Ajax实现动态加载数据【原创】
原先的页面如下: 要实现的效果图: 要实现的效果,就是点击"查看更多"按钮,动态加载五条数据.而点击"查看所有"时数据全部加载. 主要的思路: 1.点击按钮,发 ...
ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: <table><tr><th styl ...
百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据
这几天接触的一个项目需要使用到百度的echart,所以简单查找并实验了几款比较简单且适用性较广的例子,做了几个简单的Demo,一来是对echart有所了解,二来也是记录一下,方便以后进一步的优化. 首 ...
利用 JQuery的load函数动态加载页面
利用JQuery的load函数动态加载页面 JQuery有好多Ajax函数,其中load是用来动态加载一个页面的内容到指定的dom元素上. 我们来做个例子: 做一个上下(左右)结构的页面,其中下左部分 ...
iscroll动态加载数据完美解决方案
iscroll动态加载数据完美解决方案参考文章: (1)iscroll动态加载数据完美解决方案 (2)https://www.cnblogs.com/ShoneH/p/5253758.html (3 ...
如何在 InfoPath 2003 表单中动态加载数据
转自微软:http://support.microsoft.com/kb/896451/zh-cn 概要简介更多信息创建新的虚拟目录设计 Microsoft Office InfoPath 2 ...
python爬取js加载的数据_JS动态加载数据不会爬？老司机教你两个方法爬取想要的数据...
学习Python的人绝大部分都是在用Python做爬虫,毕竟对于爬虫而言Python是不二选. 但是一般简单的静态页面网站还是很好爬取的,对于很多动态加载的网站就不知道怎么办了,今天小编就给大家介绍两 ...
echarts java动态数据_[ASP.net教程]ECharts Java 动态加载数据，echartsjava
[ASP.net教程]ECharts Java 动态加载数据,echartsjava 0 2015-12-18 00:00:05 1.前台jsp页面html PUBLIC "-//W3C// ...

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

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

JQuery-weui city-picker动态加载数据相关推荐

最新文章

热门文章