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>',
} }($);

  

jQuery weui Select组件显示指定值的更多相关文章

  1. GridView 根据要求显示指定值

    最近在写一个小项目用来练手恢复一下功力的,在Users表中有一个用户字段是状态,我使用"0"表示启用,“1”表示禁用, 存到数据库中, 由于之前有一段时间没写代码了,所以有点生疏了 ...

  2. vue自定义select组件

    1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据, ...

  3. jquery简单原则器(匹配索引大于指定值的元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery简单原则器(匹配索引为指定值的元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Jquery EasyUI 各组件属性、事件详解

    CSS类定义: div easyui-window                               window窗口样式 属性如下: 1)       modal:是否生成模态窗口.tru ...

  6. 如何实现select组件的选择输入过滤作用

    实现select组件的选择输入过滤作用的js代码如下: /** *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码 ** / (function ( $ ) { $. ...

  7. 微信WeUI扩展组件

    主要包括 下拉刷新pullToRefresh downRefresh.html 主要的代码是$(document.body).pullToRefresh(); <div class=" ...

  8. jQuery获取select option

    jQuery的一些方法理出一些常用的方法: //获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option: ...

  9. 如何用jQuery获得select的值

    如何用jQuery获得select的值,在网上找了看了一下,下面将总结一下: 1.获取第一个option的值        $('#test option:first').val(); 2.最后一个o ...

随机推荐

  1. cocos2dx——lua自己主动和手动绑定

    [自己主动绑定] 參考:http://my.oschina.net/skyhacker2/blog/298397 主要是通过引擎自带的tools/tolua,主要过程例如以下: 1.编写好要导出的c+ ...

  2. 数据库中解析XML

    简介:OPENXML方法使用一例实现导入功能 DECLARE @strProjGUID AS VARCHAR(50)  DECLARE @strProjCode AS VARCHAR(50)  DEC ...

  3. Objective-C基础笔记(1)基本概念和第一个程序

    一.基本概念 Objective-C(简称OC)是iOS开发的核心语言,苹果公司在维护,在开发过程中也会配合着使用C语言.C++,OC主要负责UI界面,C语言.C++可用于图形处理.C语言是面向过程的 ...

  4. TrueSec引导的Linux系统和安全检测工具预览

      650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=&qu ...

  5. HML5

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. actionbar spinner-用法实例

    今天需要更改一个actionbar上的spinner的字体颜色,结果试了好长时间都没有解决,最后才发现,原来他是在代码下增加的一个textview,然后使用adapter加载的,并不是直接用frame ...

  7. python项目实战-小游戏1

    项目规则: 1.玩家和敌人分别从现有的角色中选择3个角色 2.随机生成目前的血量,和攻击量 3.游戏规则:当玩家向敌人发起攻击,敌人当前的血量=之前的血量-玩家的血量,同理 4.3局两胜 5.自定义玩 ...

  8. 洛谷 P1206 [USACO1.2]回文平方数 Palindromic Squares

    P1206 [USACO1.2]回文平方数 Palindromic Squares 题目描述 回文数是指从左向右念和从右向左念都一样的数.如12321就是一个典型的回文数. 给定一个进制B(2< ...

  9. 洛谷 P1808 单词分类_NOI导刊2011提高(01)

    P1808 单词分类_NOI导刊2011提高(01) 题目描述 Oliver为了学好英语决定苦背单词,但很快他发现要直接记住杂乱无章的单词非常困难,他决定对单词进行分类. 两个单词可以分为一类当且仅当 ...

  10. [D3] Build an Area Chart with D3 v4

    Similar to line charts, area charts are great for displaying temporal data. Whether you’re displayin ...