jqweui的picker动态加载数据
来源:互联网 发布:空间绑定域名 编辑:程序博客网 时间:2024/06/10 17:18
大家好,我是烤鸭:
jqweui的picker动态加载数据
jqweui是jquery对weui的拓展开发,picker就是其中的一个拓展组件,
先附上官网显示地址和代码:
http://jqweui.com/extends#picker
<input type="text" id='picker'/><script>$("#picker").picker({ title: "请选择您的手机", cols: [ { textAlign: 'center', values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3'] } ]});</script>
上一张显示图:如果是动态加载数据的话,可以把加载方法写成一个方法,数据是加载后返回的再填充。但是有一个问题,前台要求的数据一般是key,value的形式,而picker插件只能接收单列数组。我是这么解决的,把要显示的key作为一个数组返回,其他的属性创建一个对象数组存起来。
例如:
1.发送ajax动态获取数据
function initFqProductList(){var url = "your/url/xxx";$.ajax({type : 'POST',url : url,data : {},dataType:'json', //jsonp:'callback', //scriptCharset: 'utf-8',success : function(data) {console.log(data);//获取数组fqProductArray = data.array;var values = new Array();for ( var i in fqProductArray) {values[i] = fqProductArray[i].productValue;}//例如(values是返回的数据)values = ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3'];packerInit(values);}});}
2.创建对象数组,保留其他属性例如:
//例如var values = ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3'];//正常情况是根据key查value,现在反向操作for(var i in values){var fqProduct = new Object();fqProduct.key = i;fqProduct.value = values[i];fqProductArray.push(fqProduct);}
这里的key就是另一个属性,我们的value是要显示在页面上的。我们可以根据value获取key,传到后台进行其他操作。如果有多个属性的话,
在创建对象的时候,给对象多几个属性。
3.初始化picker插件
例如:这里的value就是上面传过来的动态数据。确定事件绑定了另一个方法,为的是获取用户点击的哪一个值。
function packerInit(values) {$("#picker1").picker({toolbarTemplate : '<div class="toolbar">'+ '<div class="toolbar-inner"><a href="javascript:;" class="cancel-picker close-picker">取消</a><a href="javascript:;" class="picker-button close-picker" onclick="staging()">确定</a></div></div>',cols : [ {textAlign : 'center',values : values,} ],cssClass : 'productList',onOpen : function() {// document.activeElement.focus();$("body").append("<div class='grayBg'></div>");},onClose : function() {$(".grayBg").remove();}});}4.取值方法
function staging() {var p1_val = $("#picker1").val();for(var i in fqProductArray){if(fqProductArray[i].value == p1_val){alert("p1_val:"+p1_val+"--------------------key:"+fqProductArray[i].key);}}for ( var p in fqProductArray) {if ($("#productName").val() == fqProductArray[p].productValue) {productKey = fqProductArray[p].productKey;productId = fqProductArray[p].productId;break;}}};最后上一张成功的图:(6 Plus 对应的key 5)
最后附上代码下载地址:
http://download.csdn.net/download/angry_mills/10169974
阅读全文
0 0
- jqweui的picker动态加载数据
- jqWEUI的select组件加载后端数据为items
- 数据的动态加载日记
- android listview 动态加载数据的问题
- Android ListView 的动态加载数据
- Android的ListView动态加载数据
- android 动态加载数据的滚动效果
- ListView动态加载网络数据的解决办法
- easyUI的combobox动态加载数据
- Unity动态加载文本数据的方法
- Easyui动态加载后台数据的例子
- Android ViewPager动态加载数据的实现
- HighChart 动态加载数据 不成功的解决办法
- 微信小程序动态的加载数据
- Echarts的使用以及动态加载数据
- Element-UI的表格动态加载数据
- 获取动态加载ajax的数据
- jqweui Toast
- 【广告】前端小白到30K月薪的路径有哪些
- 99999
- CentOS下git与gitosis 安装
- 禁止横竖屏切换、强制横竖屏
- Spring 定时任务之 @Scheduled cron表达式
- jqweui的picker动态加载数据
- 利用 socket.io 实现消息实时推送
- 第一次构建个人网站的记录
- 【图论】点分治总结&POJ2114Boatherds题解
- Qt--Q_GLOBAL_STATIC
- centos一键安装redmine
- PSR-4自动加载器
- servlet请求转发、重定向路径
- VUE项目目录介绍