适配器和装饰器

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

大多数内置特性(如前面章节中描述的那些)都是通过其中一个内置适配器实现的。你可以通过实现自己的适配器来进一步扩展 Select2 的功能。

适配器接口

所有自定义适配器必须实现由Adapter接口所描述的方法。

另外,那些覆盖默认selectionAdapterdataAdapter行为的适配器还必须实现相应SelectionAdapterDataAdapter接口中描述的额外方法。

Adapter

所有适配器都必须实现Adapter接口,Select2 使用该接口来渲染适配器的 DOM 元素并绑定任何内部事件:

// The basic HTML that should be rendered by Select2. A jQuery or DOM element
// should be returned, which will automatically be placed by Select2 within the
// DOM.
//
// @returns A jQuery or DOM element that contains any elements that must be
//   rendered by Select2.
Adapter.render = function () {
  return $jq;
};

// Bind to any Select2 or DOM events.
//
// @param container The Select2 object that is bound to the jQuery element.  You
//   can listen to Select2 events with `on` and trigger Select2 events using the
//   `trigger` method.
// @param $container The jQuery DOM node that all default adapters will be
//   rendered within.
Adapter.bind = function (container, $container) { };

// Position the DOM element within the Select2 DOM container, or in another
// place. This allows adapters to be located outside of the Select2 DOM,
// such as at the end of the document or in a specific place within the Select2
// DOM node.
//
// Note: This method is not called on data adapters.
//
// @param $rendered The rendered DOM element that was returned from the call to
//   `render`. This may have been modified by Select2, but the root element
//   will always be the same.
// @param $defaultContainer The default container that Select2 will typically
//   place the rendered DOM element within. For most adapters, this is the
//   Select2 DOM element.
Adapter.position = function ($rendered, $defaultContainer) { };

// Destroy any events or DOM elements that have been created.
// This is called when `select2("destroy")` is called on an element.
Adapter.destroy = function () { };

SelectionAdapter

选择区域是用户所看到的替代标准<select>下拉框的部分。它控制选中选项的显示,以及需要嵌入到容器中的其他内容(比如搜索框)。

将用于覆盖默认selectionAdapter行为的适配器也必须实现update方法:

// Update the selected data.
//
// @param data An array of data objects that have been generated by the data
//   adapter. If no objects should be selected, an empty array will be passed.
//
// Note: An array will always be passed into this method, even if Select2 is
// attached to a source which only accepts a single selection.
SelectionAdapter.update = function (data) { };

DataAdapter

数据集是 Select2 用来生成可选项结果以及当前已选结果的对象。

将用于覆盖默认dataAdapter行为的适配器也必须实现currentquery方法:

// Get the currently selected options. This is called when trying to get the
// initial selection for Select2, as well as when Select2 needs to determine
// what options within the results are selected.
//
// @param callback A function that should be called when the current selection
//   has been retrieved. The first parameter to the function should be an array
//   of data objects.
DataAdapter.current = function (callback) {
  callback(currentData);
}

// Get a set of options that are filtered based on the parameters that have
// been passed on in.
//
// @param params An object containing any number of parameters that the query
//   could be affected by. Only the core parameters will be documented.
// @param params.term A user-supplied term. This is typically the value of the
//   search box, if one exists, but can also be an empty string or null value.
// @param params.page The specific page that should be loaded. This is typically
//   provided when working with remote data sets, which rely on pagination to
//   determine what objects should be displayed.
// @param callback The function that should be called with the queried results.
DataAdapter.query = function (params, callback) {
  callback(queryiedData);
}

装饰器

Select2 使用装饰器来通过其配置选项.

暴露适配器的功能。Utils.Decorate方法应用一个装饰器:

$.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 会自动加载一些模块,因此在自定义 AMD 构建中使用 Select2 的人可能需要指定生成的 Select2 模块的路径。

无噪 Logo
无噪文档
25 年 6 月翻译
版本号 4.0.13
文档源↗