Jquery weui picker 支持label和value

万年没更新了. 最近用jquery weui. 在使用picker时需要一些问题.

就是让picker 显示label, 但是取值的时候取value用于存储. 官网例子如下

Jquery-weui 官网 : 点这里  写这篇文章时,用的版本是1.2.1版本

$("#picker-name").picker({title: "请选择您的称呼",cols: [{textAlign: 'center',values: ['赵', '钱', '孙', '李', '周', '吴', '郑', '王']//如果你希望显示文案和实际值不同,可以在这里加一个displayValues: [.....]
    },{textAlign: 'center',values: ['杰伦', '磊', '明', '小鹏', '燕姿', '菲菲', 'Baby']},{textAlign: 'center',values: ['先生', '小姐']}]
});

但是文本框中显示的依然是value !!!!!

于是只能想其他办法. 在onChange中将value存储到 data-values中. 效果就达到了.

 

但是!!!!!

界面操作是没问题了,接着其他问题就来了.

当从数据库查出来时, 界面依然是显示 value, 因为数据库存的就是value.

我试图在取出数据后改变文本框的值. 看起来正常了. 

$.ajax ({...success: function(){$("#input").val(值的Text)}
})

还是但是!!!

 

有2个问题

1、你在执行 $("#input").val(值) 时未必已经能加载出picker的数据源了.  所以你不一定能通过value拿到text去显示

2、就算你先拿出了picker的数据源, 再去加载数据库的值设置. 看上去是没问题了. 但是当你点击的时候..并不会默认指向你的值, 还会把你的值改成第一项。。。

      (关于第二点,  查了下,好像是说picker是在打开过后才初始化内部的内容, 试了下以下代码可行  )

    

$("#input").picker("open");
$("#input").picker("setValue", [由值算出的文本]);
$("#input").picker("close");

  以上代码确实可行了, 但是当你onChange里处理其他逻辑时就头疼了...因为这几句代码么会触发onChange事件. 

  举例子:  picker 选择性别  . 男的身高默认170,  囡的身高默认160,  

  所以你需要在onChange里去更新身高的文本框, 这时用户改了身高为175保存.  

  当你从数据库取出来用以上代码设置性别时, 会触发onChange事件又把身高改成170了.

 

最终办法:

结合以上问题得出思路:

1、二次封装picker

2、在每次值发生改变时, 将label设置到文本框,  value设置到 data-values

3、提供setValue(v) 方法. 此方法即使数据源没加载出来依然会记录下value, 等到数据源加载出来了会取value出来更新作为默认的值

4、提供setDataSource(data) 方法, 此方法调用时将已存储设置的值拿出来重算一次label显示.

5、提供getValue() 获取值

 

注意: picker初始化后再设置文本框的值不会更新picker的值, 因此点击弹出时不会定位到默认值, 这里的解决办法是 destroy后重新初始化.

 

不说了,累了几天了头脑很乱也不知道写得看不看得懂.  直接上插件代码.

 

/* 二次封装weui的picker, 主要是目前的picker不支持text和value的方式使用,所以封装一下,同时让他支持异步加载数据 */
/*
* title             picker的标题. 跟picker一样
* value             当前值
* data              数据源, 对象集合,  对象必须包含 label 和 value 属性.
* allowEmpty        是否追加空白数据, 默认为true并追加空白数据
* onChange          选项变更事件, 不同于原picker的是多了第2个参数, 第二个参数为当前所有选项列表. 且仅当选项改变才触发 (原picker只要点击就会触发)
*                   
* 例子:             var picker = $("#selector").pickerPlus({}).data("pickerPlus");
* 
* 可使用方法:         
* picker.setValue(value)    设置值, 传入的picker必须为数据对象的 value, 支持预设置. 即在数据源未加载完成前设置. (原picker一旦设置数据源, 无法再修改值, 除非open, setValue, close)
* picker.setDataSource(data)设置数据源
* picker.getValue()         获取值.  注意.原$("#selector").val()拿到的是label,需要用此方法获取值. 或者$("#selector").attr("data-values")获取值
*/(function ($) {var defaultSettings = {title: '',data: [],value: '',allowEmpty: true,onChange: function () { }};$.fn.pickerPlus = function (settings) {return this.each(function () {var elem = $(this);elem.data('pickerPlus', new P(elem, settings));});}function P(elem, settings) {this.elem = elem;this.picker = null;this.settings = $.extend({}, defaultSettings, settings || {});this.init();return this;}P.prototype = {init: function () {let that = this,elem = that.elem,setting = that.settings;if (setting.allowEmpty && !setting.data.find(x => x.value == "")) {setting.data.splice(0, 0, { label: '', value: '' })}let obj = setting.data.find(x => x.value == setting.value);if (obj) {elem.val(obj.label);}elem.attr("data-values", setting.value);that.picker && that.picker.destroy();elem.picker({title: setting.title,cols: [{textAlign: 'center',values: setting.data.map(x => x.label)}],onChange: function (e) {let oldValue = that.settings.value;let newValue = that.settings.data.find(x => x.label == e.value[0]).value;that.settings.value = newValue;if (oldValue != newValue)setting.onChange && setting.onChange(e, setting.data);}});that.picker = that.elem.data('picker');},setDataSource: function (data) {let that = this,elem = that.elem,setting = that.settings;that.settings.data = data;that.init();return this;},setValue: function (key) {let that = this,elem = that.elem,setting = that.settings;that.settings.value = key;that.init();return this;},getValue: function () {return this.settings.value || '';}}})(jQuery);
View Code

 

使用方式

1、引入

2、界面初始化时var picker = $("#input"),pickerPlus( {  选项 } ).data("pickerPlus");  

3、赋值时picker.setValue("value")

4、设置数据源时 picker.setDataSouce(data)  格式为数组对象 [{ label: '内容', value: '值' }]

4、获取值时picker.getValue()

 

这样一来,无需再关心是不是要等数据源先加载还是先设置文本框值的问题了.

 

插件写的很匆忙很乱,暂时没时间优化. 另外如果有其他更好的方案也可以告诉我。谢谢

 

转载于:https://www.cnblogs.com/cskk/p/10202182.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265075.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux—任务计划

1、周期性任务计划:管理系统的过程中,我们并不是每次都直接执行脚本或者命令,有时候需要让脚本、命令以及系统等在指定的时间按照我们的意愿执行我们设定好的脚本或者命令,这时候就需要使用到Linux任务计划的功能了,但…

计算机网络第1章(概述)

B站视频:计算机网络微课堂(有字幕无背景音乐版) 网址:https://www.bilibili.com/video/BV1c4411d7jb?p61 目录图示说明1.1、计算机网络在信息时代的作用我国互联网发展状况1.2、因特网概述1、网络、互连网(互联网&…

django 中使用 channels 实现websocket

.... 转载于:https://www.cnblogs.com/zxmbky/p/10203009.html

HDU 1754线段树

第一个自己动手写的线段树&#xff0c;1Y还是有点小激动哈&#xff08;虽然是模版题&#xff09; 1 #include<cstdio>2 #include<cstring>3 #include<algorithm>4 using namespace std;5 const int SIZE200005;6 const int INF1000000;7 int maxv[SIZE<&l…

Linux命令(七)Linux用户管理和修改文件权限

1. 用户管理 1.1 创建用户/设置密码/删除用户 &#xff08;-m很重要&#xff0c;自动添加用户家目录&#xff09; 创建用户组dev, 给用户组dev新建xiaoqin用户&#xff0c;给新用户设置密码&#xff01; 1.2 查看用户信息 1.3 设置用户主组/附加组 &#xff08;常使用修改用户附…

元模型驱动

感谢徐昊给我们传授这么好的思想。虽然我现在还没有全部弄明白——————————在网上查到了元数据的解释是关于数据的数据。那么元模型就是关于模型的模型。抽象的过程就是形成元模型的过程。建模的过程就是抽象的过程。我们要形成object的模型&#xff0c;所以建立了的是…

2月末周全球域名解析商Top15:万网DNSPod份额均上涨

IDC评述网&#xff08;idcps.com&#xff09;03月11日报道&#xff1a;据域名统计机构WebHosting.info最新数据&#xff0c;在2月末周&#xff08;截至3月3日&#xff09;期间&#xff0c;我国仍是两名域名解析服务商跻身进全球前十五强。其中&#xff0c;中国万网排名第9&…

IHttpHandler与IHttpHandlerFactory的区别一例

在进行访问请求拦截处理时&#xff0c;处理类可以继承自IHttpHandler也可以继承自IHttpHandlerFactory&#xff0c;但他们之间有什么区别呢&#xff1f;近日开发一个需要拦截访问处理的项目&#xff0c;由于需要使用到SESSION&#xff0c;在这里发出了求助贴子&#xff08;积木…

ubuntu - 安装hive

粗略步骤&#xff1a; 详细参考&#xff1a;https://www.2cto.com/net/201804/735478.html 环境&#xff1a;ubunut jdk hadoop mysql 一、下载hive 二、解压&#xff08;到指定目录&#xff09; 三、配置 /etc/profile [环境变量] - 执行&#xff1a; source /etc/profil…

今天拿到了同事给我买的《java与模式》

自从有了设计模式的概念后一直想买本模式方面的书&#xff0c;所以买了《C#设计模式》&#xff0c;但是读了几个月的时间发现自己还只是看了简单工厂&#xff0c;工厂&#xff0c;抽象工厂和单件模式&#xff0c;已经被此书搞得晕头转向了&#xff08;书也烂&#xff0c;自己水…

计算机网络第4章(网络层)

B站视频&#xff1a;计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09; 网址&#xff1a;https://www.bilibili.com/video/BV1c4411d7jb?p61 目录4.1、网络层概述简介总结4.2、网络层提供的两种服务面向连接的虚电路服务无连接的数据报服务虚电路服务与数据报服务的…

Struts2中action接受参数方法

Struts2中Action接收参数的方法主要有以下三种&#xff1a;1.使用Action的属性接收参数&#xff1a; a.定义&#xff1a;在Action类中定义属性&#xff0c;创建get和set方法&#xff1b; b.接收&#xff1a;通过属性接收参数&#xff0c;如&#xff1a;userName&#xff…

Python __slots__ 作用

参考&#xff1a;https://blog.csdn.net/u010733398/article/details/52803643 https://blog.csdn.net/sxingming/article/details/52892640 转载于:https://www.cnblogs.com/xiaoshayu520ly/p/10207390.html

arm's multiply(arm的乘)之三

路转峰回发现编译器的优化比较复杂&#xff0c;在代码结构不同的情况下做的优化也完全不同。又做了一个实验&#xff0c;这次evc很笨没有做优化int array[1000];int res;for(int p10;p1<1000;p1)for(int p20;p2<1000;p2)for(int p30;p3<1000;p3)res array[1000]*105;…

CSS 实现背景半透明

IE过渡滤镜 CSS3 rgba 即可完美实现。 具体实现代码如下&#xff1a; .transparent {background:rgba(0, 0, 0, 0.3);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType0, StartColorStr#4c000000, EndColorStr#4c000000); } :root .transparent {filter:progi…

计算机网络第5章(传输层)

B站视频&#xff1a;计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09; 网址&#xff1a;https://www.bilibili.com/video/BV1c4411d7jb?p61 目录5.1、运输层概述概念总结5.2、运输层端口号、复用与分用的概念为什么用端口号发送方的复用和接收方的分用TCP/IP体系的…

C#设计模式(7)-Singleton Pattern

内容篇幅较长,请点击这里阅读全文转载于:https://www.cnblogs.com/zhenyulu/archive/2004/08/28/37252.html

Manjaro使用笔记-使用中国源的方法

生成可用中国镜像站列表&#xff1a; sudo pacman-mirrors -i -c China -m rank 勾选弹窗里面的所有源刷新缓存 sudo pacman -Syy 转载于:https://www.cnblogs.com/renren-study-notes/p/10215982.html

java代码编写出现的陷阱-1:警惕变长参数

在Java5 中提供了变长参数&#xff08;varargs&#xff09;&#xff0c;也就是在方法定义中可以使用个数不确定的参数&#xff0c;对于同一方法可以使用不同个数的参数调用&#xff0c;调用的时候可以给出任意多个参数也可不给参数.如method(Object...objs){...} . 调用时的代…

计算机网络第6章(应用层)

B站视频&#xff1a;计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09; 网址&#xff1a;https://www.bilibili.com/video/BV1c4411d7jb?p61 目录6.1、应用层概述6.2、客户/服务器方式&#xff08;C/S方式&#xff09;和对等方式&#xff08;P2P方式&#xff09;概…