适配器和装饰器

从版本4.0开始,Select2使用适配器模式作为扩展其功能和行为的强大方法。

大多数内置功能(例如前几章中所述的功能)都是通过其中一个内置适配器实现的。您可以通过实现自己的适配器来进一步扩展Select2的功能。

适配器接口

所有自定义适配器都必须实现Adapter 接口。

此外,覆盖默认设置的适配器selectionAdapterdataAdapter 行为必须实现相应描述的其他方法 SelectionAdapterDataAdapter 接口。

Adapter

所有适配器必须实现Adapter接口,Select2用于呈现适配器的DOM元素并绑定任何内部事件:

//应该由Select2呈现的basic。jQuery或DOM元素
//应返回,它将由Select2自动放置在
// DOM.
//
//@返回一个jQuery或DOM元素,该元素包含必须
//由Select2呈现。
Adapter.render = function () {
  return $jq;
};

//绑定到任何Select2或DOM事件。
//
//@param container绑定到jQuery元素的Select2对象。你呢
//可以使用“on”侦听Select2事件,并使用
//“trigger”方法。
//@param$container所有默认适配器都是的jQuery DOM节点
//在内渲染。
Adapter.bind = function (container, $container) { };

//将DOM元素放在select2dom容器中,或另一个DOM容器中
//地点。这允许适配器位于select2dom之外,
//例如在文档末尾或Select2中的特定位置
//DOM节点。
//
//注意:此方法不在数据适配器上调用。
//
//@param$呈现了调用返回的呈现的DOM元素
//“render”。这可能已被Select2修改,但根元素
//永远都是一样的。
//@param$defaultContainer Select2的默认容器通常
//将呈现的DOM元素放入。对于大多数适配器,这是
//选择2 DOM元素。
Adapter.position = function ($rendered, $defaultContainer) { };

//销毁所有已创建的事件或DOM元素。
//当对元素调用“select2(“destroy”)`时调用此函数。
Adapter.destroy = function () { };

SelectionAdapter

选择是显示给用户的替代标准<select>框。它控制选择选项的显示以及容器中需要嵌入的其他任何内容,例如搜索框。

将用于覆盖默认值的适配器 selectionAdapter 必须实施 update 方法:

//更新所选数据。
//
//@param data由数据生成的数据对象数组
//适配器。如果不应选择任何对象,则将传递一个空数组。
//
//注意:即使Select2是
//附加到只接受单个选择的源。
SelectionAdapter.update = function (data) { };

DataAdapter

数据集是Select2用于生成可能的结果以及当前选择的结果的数据。

将用于覆盖默认值的适配器 dataAdapter 必须实施 current 以及 query 方法:

//获取当前选定的选项。当试图获取
//Select2的初始选择,以及Select2需要确定的时间
//结果中选择了哪些选项。
//
//@param callback当前选择时应调用的函数
//已检索。函数的第一个参数应该是数组
//数据对象。
DataAdapter.current = function (callback) {
  callback(currentData);
}
//获取一组基于
//被传进来了。
//
//@param params包含任意数量的参数的对象
//可能会受到影响。只记录核心参数。
//@参数参数术语用户提供的术语。这通常是
//搜索框,如果存在,但也可以是空字符串或空值。
//@参数参数页应加载的特定页面。这是典型的
//远程分页时所依赖的数据集
//确定应该显示哪些对象。
//@param callback应使用查询结果调用的函数。
DataAdapter.query = function (params, callback) {
  callback(queryiedData);
}

装饰器

Select2使用装饰器通过其配置选项公开适配器的功能。

您可以使用 Utils.Decorate Select2提供的方法:

$.fn.select2.amd.require(
    ["select2/utils", "select2/selection/single", "select2/selection/placeholder"],
    function (Utils, SingleSelection, Placeholder) {
  var CustomSelectionAdapter = Utils.Decorate(SingleSelection, Placeholder);
});

使用装饰器或适配器的所有核心选项都将在文档的“装饰器”或“适配器”部分中明确说明。装饰器通常仅与特定类型的适配器兼容,因此请确保注意所提供的适配器。

AMD相容性

您可以在此处找到有关如何将Select2与现有的基于AMD的项目集成的更多信息。当自动构建适配器时,Select2会自动加载某些模块,因此那些将Select2与自定义AMD版本一起使用自己的系统使用的用户可能需要指定生成到Select2模块的路径。