网站开发人员应该用什么浏览器,大连网站建设哪个公司好,微信小程序分销系统,外贸看的英文网站万年没更新了. 最近用jquery weui. 在使用picker时需要一些问题. 就是让picker 显示label, 但是取值的时候取value用于存储. 官网例子如下 Jquery-weui 官网 : 点这里 写这篇文章时#xff0c;用的版本是1.2.1版本 $(#picker-name).picker({title: 请选择您…万年没更新了. 最近用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
