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()

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

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