从 4.0 版本开始,Select2 使用了适配器模式作为扩展其功能和行为的一种强大方式。
大多数内置特性(如前面章节中描述的那些)都是通过其中一个内置适配器实现的。你可以通过实现自己的适配器来进一步扩展 Select2 的功能。
所有自定义适配器必须实现由Adapter
接口所描述的方法。
另外,那些覆盖默认selectionAdapter
和dataAdapter
行为的适配器还必须实现相应SelectionAdapter
和DataAdapter
接口中描述的额外方法。
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
行为的适配器也必须实现current
和query
方法:
// 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);
}
暴露适配器的功能。Utils.Decorate
方法应用一个装饰器:
$.fn.select2.amd.require(
["select2/utils", "select2/selection/single", "select2/selection/placeholder"],
function (Utils, SingleSelection, Placeholder) {
var CustomSelectionAdapter = Utils.Decorate(SingleSelection, Placeholder);
});
所有核心选项如果使用了装饰器或适配器,会在文档的“装饰器”或“适配器”部分明确说明。装饰器通常只与特定类型的适配器兼容,因此请务必注意所使用的适配器类型。
你可以在这里找到有关如何将 Select2 集成到现有基于 AMD 的项目中的更多信息:这里。当适配器被自动构建时,Select2 会自动加载一些模块,因此在自定义 AMD 构建中使用 Select2 的人可能需要指定生成的 Select2 模块的路径。