jQuery weui有个支持单选或者多选的select弹出层,默认他是这样的
第2部分选择什么值,第1部分就显示什么值,一般的场景支持是没问题了,但本次开发碰到了一个问题。
需求描述:
职业名称后面要显示一些描述,如“法官 2个案件在审理”,“医生 正在做手术”,同时要求点击对应项时,只显示“法官”,“医生”而不显示剩余的描述,根据select现有的逻辑是无法实现这个功能的。只能实现选项是什么,显示的值就是什么,不明白,看下图
解决方案:
查看官方文档,数据通过title和value进行控制,title是显示的值,value一般用于给后端传值
$("#mobile").select({ title: "选择职业", items: [ { title: "法官 2个案件在审理", value: "001", }, { title: "医生 正在做手术", value: "002", } ]});
很明显我们是可以通过修改items项的配置来实现该需求:
1、首先修改配置项
$("#mobile").select({ title: "选择职业", items: [ { title: "法官 2个案件在审理", showTitle: "医生", value: "001", }, { title: "医生 正在做手术", showTitle: "医生", value: "002", } ]});
showTitle用于回显
2、下面修改jquery.weui.js
大概从4695到4998行,Select组件封装在一个函数体中,这样避免变量污染同时也方便管理,大概有5个地方涉及到该需求,一个个来看:
2.1、Select.prototype.updateInputValue方法,该方法用于更新你点击的那个input的值及给他设置一个data-values值,这里有两个地方需要修改
原来的代码:
Select.prototype.updateInputValue = function(values, titles) { var v, t; if(this.config.multi) { v = values.join(this.config.split); t = titles.join(this.config.split); } else { v = values[0]; t = titles[0]; }
修改后的代码:
Select.prototype.updateInputValue = function(values, titles, showtitles) { var v, t, s; if(this.config.multi) { v = values.join(this.config.split); t = titles.join(this.config.split); s = showtitles.join(this.config.split); } else { v = values[0]; t = titles[0]; s = showtitles[0]; }
新增了一个形参,同时对该形参进行了处理
原来的代码
this.$input.val(t).data("values", v); this.$input.attr("value", t).attr("data-values", v);
修改后的代码
this.$input.val(s).data("values", v);this.$input.attr("value", s).attr("data-values", v);
可以发现input的值不再是原来的值,改成了配置项showTitle的值
2.2、Select.prototype.parseInitValue方法,该方法用于反显,也就是你上次选值后再次调用select要把选中的部分给选上,整个方法更新如下:
Select.prototype.parseInitValue = function() { var value = this.$input.val(); var items = this.config.items; var dataVales = this.$input.attr(‘data-values‘) //如果input为空,只有在第一次初始化的时候才保留默认选择。因为后来就是用户自己取消了全部选择,不能再为他选中默认值。 if( !this._init && (value === undefined || value == null || value === "")) return; var titles = this.config.multi ? value.split(this.config.split) : [value]; var vals = this.config.multi ? dataVales.split(this.config.split) : [dataVales]; // 建议以值来判断哪些要处于选中状态,以文本来判断有太多不确定因素,如值多了/少个空格 if(vals || vals.length > 0) { for(var i=0;i<items.length;i++) { items[i].checked = false; for(var j=0;j<vals.length;j++) { if(parseInt(items[i].value) === parseInt(vals[j])) { items[i].checked = true; } } } } else { for(var i=0;i<items.length;i++) { items[i].checked = false; for(var j=0;j<titles.length;j++) { if(items[i].title === titles[j]) { items[i].checked = true; } } } } }
根据文档我们知道data-values一般存储发送给后台的id值,用id值来做比较是最靠谱的,通过文本值来判断就未必了,多一个空格少个空格都不相等
2.3、Select.prototype._bind这是绑定事件的入口,整体修改如下:
Select.prototype._bind = function(dialog) { var self = this, config = this.config; dialog.on("change", function(e) { var checked = dialog.find("input:checked"); var values = checked.map(function() { return $(this).val(); }); var titles = checked.map(function() { return $(this).data("title"); }); var showTitles = checked.map(function() { return $(this).data("showtitle"); }); self.updateInputValue(values, titles, showTitles); if(config.autoClose && !config.multi) self.close(); }) .trigger(‘change‘) .on("click", ".close-select", function() { self.close(); }); }
作用就是给目标附加一个data-showtitle属性,值就是配置项里showTitle的值
2.4、Select.prototype.getHTML该方法用于生成模板,修改如下:
Select.prototype.getHTML = function(callback) { var config = this.config; return this.tpl({ items: config.items, title: config.title, showtitle: config.showTitle, closeText: config.closeText })}
依葫芦画瓢,新增了一个showtitle属性,用于模板中显示用
2.5、defaults = $.fn.select.prototype.defaults配置项,此处要修改的是模板部分,修改如下:
toolbarTemplate: ‘<div class="toolbar"> <div class="toolbar-inner"> <a href="javascript:;" class="picker-button close-select">{{closeText}}</a> <h1 class="title">{{title}}</h1> </div> </div>‘, radioTemplate: ‘<div class="weui-cells weui-cells_radio"> {{#items}} <label class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}"> <div class="weui-cell__bd weui-cell_primary"> <p>{{this.title}}</p> </div> <div class="weui-cell__ft"> <input type="radio" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-showtitle="{{this.showTitle}}" data-title="{{this.title}}"> <span class="weui-icon-checked"></span> </div> </label> {{/items}} </div>‘, checkboxTemplate: ‘<div class="weui-cells weui-cells_checkbox"> {{#items}} <label class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}"> <div class="weui-cell__bd weui-cell_primary"> <p>{{this.title}}</p> </div> <div class="weui-cell__ft"> <input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-showtitle="{{this.showTitle}}" data-title="{{this.title}}" > <span class="weui-icon-checked"></span> </div> </label> {{/items}} </div>‘,
没什么特别的,只是给模板新增了一个data-showtitle属性,用于回显,到此整个修改完成,最后附完整代码。
完整代码:
+ function($) { "use strict"; var defaults; var selects = []; var Select = function(input, config) { var self = this; this.config = config; //init empty data this.data = { values: ‘‘, titles: ‘‘, origins: [], length: 0 }; this.$input = $(input); this.$input.prop("readOnly", true); this.initConfig(); config = this.config; this.$input.click($.proxy(this.open, this)); selects.push(this) } Select.prototype.initConfig = function() { this.config = $.extend({}, defaults, this.config); var config = this.config; if(!config.items || !config.items.length) return; config.items = config.items.map(function(d, i) { if(typeof d == typeof "a") { return { title: d, value: d }; } return d; }); this.tpl = $.t7.compile("<div class=‘weui-picker-modal weui-select-modal‘>" + config.toolbarTemplate + (config.multi ? config.checkboxTemplate : config.radioTemplate) + "</div>"); if(config.input !== undefined) this.$input.val(config.input); this.parseInitValue(); this._init = true; } Select.prototype.updateInputValue = function(values, titles, showtitles) { var v, t, s; if(this.config.multi) { v = values.join(this.config.split); t = titles.join(this.config.split); s = showtitles.join(this.config.split); } else { v = values[0]; t = titles[0]; s = showtitles[0]; } //caculate origin data var origins = []; this.config.items.forEach(function(d) { values.each(function(i, dd) { if(d.value == dd) origins.push(d); }); }); // this.$input.val(t).data("values", v); // 原来的 this.$input.val(s).data("values", v); // this.$input.attr("value", t).attr("data-values", v); // 原来的 this.$input.attr("value", s).attr("data-values", v); var data = { values: v, titles: t, valuesArray: values, titlesArray: titles, origins: origins, length: origins.length }; this.data = data; this.$input.trigger("change", data); this.config.onChange && this.config.onChange.call(this, data); } Select.prototype.parseInitValue = function() { var value = this.$input.val(); var items = this.config.items; var dataVales = this.$input.attr(‘data-values‘) //如果input为空,只有在第一次初始化的时候才保留默认选择。因为后来就是用户自己取消了全部选择,不能再为他选中默认值。 if( !this._init && (value === undefined || value == null || value === "")) return; var titles = this.config.multi ? value.split(this.config.split) : [value]; var vals = this.config.multi ? dataVales.split(this.config.split) : [dataVales]; // 建议以值来判断哪些要处于选中状态,以文本来判断有太多不确定因素,如值多了/少个空格 if(vals || vals.length > 0) { for(var i=0;i<items.length;i++) { items[i].checked = false; for(var j=0;j<vals.length;j++) { if(parseInt(items[i].value) === parseInt(vals[j])) { items[i].checked = true; } } } } else { for(var i=0;i<items.length;i++) { items[i].checked = false; for(var j=0;j<titles.length;j++) { if(items[i].title === titles[j]) { items[i].checked = true; } } } } } Select.prototype._bind = function(dialog) { var self = this, config = this.config; dialog.on("change", function(e) { var checked = dialog.find("input:checked"); var values = checked.map(function() { return $(this).val(); }); var titles = checked.map(function() { return $(this).data("title"); }); var showTitles = checked.map(function() { return $(this).data("showtitle"); }); self.updateInputValue(values, titles, showTitles); if(config.autoClose && !config.multi) self.close(); }) .trigger(‘change‘) .on("click", ".close-select", function() { self.close(); }); } //更新数据 Select.prototype.update = function(config) { this.config = $.extend({}, this.config, config); this.initConfig(); if(this._open) { this._bind($.updatePicker(this.getHTML())); } } Select.prototype.open = function(values, titles) { if(this._open) return; // open picker 会默认关掉其他的,但是 onClose 不会被调用,所以这里先关掉其他select for (var i = 0; i < selects.length; i++ ) { var s = selects[i]; if (s === this) continue; if (s._open) { if(!s.close()) return false; // 其他的select由于某些条件限制关闭失败。 } } this.parseInitValue(); var config = this.config; var dialog = this.dialog = $.openPicker(this.getHTML()); this._bind(dialog); this._open = true; if(config.onOpen) config.onOpen(this); } Select.prototype.close = function(callback, force) { if (!this._open) return false; var self = this, beforeClose = this.config.beforeClose; if(typeof callback === typeof true) { force === callback; } if(!force) { if(beforeClose && typeof beforeClose === ‘function‘ && beforeClose.call(this, this.data.values, this.data.titles) === false) { return false } if(this.config.multi) { if(this.config.min !== undefined && this.data.length < this.config.min) { $.toast("请至少选择"+this.config.min+"个", "text"); return false } if(this.config.max !== undefined && this.data.length > this.config.max) { $.toast("最多只能选择"+this.config.max+"个", "text"); return false } } } $.closePicker(function() { self.onClose(); callback && callback(); }); return true } Select.prototype.onClose = function() { this._open = false; if(this.config.onClose) this.config.onClose(this); } Select.prototype.getHTML = function(callback) { var config = this.config; return this.tpl({ items: config.items, title: config.title, showtitle: config.showTitle, closeText: config.closeText }) } $.fn.select = function(params, args) { return this.each(function() { var $this = $(this); if(!$this.data("weui-select")) $this.data("weui-select", new Select(this, params)); var select = $this.data("weui-select"); if(typeof params === typeof "a") select[params].call(select, args); return select; }); } defaults = $.fn.select.prototype.defaults = { items: [], input: undefined, //输入框的初始值 title: "请选择", multi: false, closeText: "确定", autoClose: true, //是否选择完成后自动关闭,只有单选模式下才有效 onChange: undefined, //function beforeClose: undefined, // function 关闭之前,如果返回false则阻止关闭 onClose: undefined, //function onOpen: undefined, //function split: ",", //多选模式下的分隔符 min: undefined, //多选模式下可用,最少选择数 max: undefined, //单选模式下可用,最多选择数 toolbarTemplate: ‘<div class="toolbar"> <div class="toolbar-inner"> <a href="javascript:;" class="picker-button close-select">{{closeText}}</a> <h1 class="title">{{title}}</h1> </div> </div>‘, radioTemplate: ‘<div class="weui-cells weui-cells_radio"> {{#items}} <label class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}"> <div class="weui-cell__bd weui-cell_primary"> <p>{{this.title}}</p> </div> <div class="weui-cell__ft"> <input type="radio" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-showtitle="{{this.showTitle}}" data-title="{{this.title}}"> <span class="weui-icon-checked"></span> </div> </label> {{/items}} </div>‘, checkboxTemplate: ‘<div class="weui-cells weui-cells_checkbox"> {{#items}} <label class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}"> <div class="weui-cell__bd weui-cell_primary"> <p>{{this.title}}</p> </div> <div class="weui-cell__ft"> <input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-showtitle="{{this.showTitle}}" data-title="{{this.title}}" > <span class="weui-icon-checked"></span> </div> </label> {{/items}} </div>‘, }}($);