jQuery weui Select组件显示指定值

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>‘,
  }

}($);

　　

原文地址：https://www.cnblogs.com/diantao/p/10299936.html

时间： 2024-10-11 05:33:19

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

vue自定义select组件

1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据,但在我平时用v-model只是在input中使用过,只知道v-model可以双向绑定数据,但并不清楚其中的实现过程,所以 需要清晰的了解v-model是什么,如下. <input v-model="test"/> <input :value="test"

jquery简单原则器（匹配索引为指定值的元素）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简单选择器</title> &

jquery简单原则器（匹配索引大于指定值的元素）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简单选择器</title> &

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

实现select组件的选择输入过滤作用的js代码如下: /** *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码 ** / /** * @description This plugin allows you to make a select box editable like a text box while keeping it's select-option features * @description no stylesheets or images

jQuery获取select option

jQuery的一些方法理出一些常用的方法: //获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option:last').val(); //获取第二个option的值 $('#test option:eq(1)').val(); //获取选中的值 $('#test').val(); $('#test option:selected').val(); //设置值为2的option为选中状态 $('#test

基于jQuery的TreeGrid组件详解

一.TreeGrid组件相关的类 1.TreeGrid(_config) _config:json格式的数据,组件所需要的数据都通过该参数提供. 2.TreeGridItem(_root, _rowId, _rowIndex, _rowData) _root:显示组件实例的目标容器对象. _rowId:选中行的id. _rowIndex:选中行的索引. _rowData:json格式的行数据. 二._config参数详解 id:组件实例的id. width:组件实例的宽度. renderTo:用

jQuery控制TR的显示隐藏

网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: Html代码   <table> <tr><td>这行不隐藏</td></tr> <tr id="tr_1"><td>这行要隐藏</td></tr> <tr id="tr_2"><td>这行要隐藏&

freemarker写select组件（三）

freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=""> <select id="${id}" name="${id}"> <option>---请选择---</option> <#list datas as data> <#if key!="

JQuery获取select选中值和清除选中状态（转）

1.获取值 var provinceSearch = $("#loc_province_search").find("option:selected").attr("lang");//获取下拉列表选中值 var citySearch = $("#loc_city_search").find("option:selected").attr("lang");//获取下拉列表选中值 var t