使用 select2 插件 (v4) 防止重新加载数据
Prevent reload of data with select2 plugin (v4)
我正在使用 select2 插件 (v4) 并使用 ajax 加载他的选项。
如果我第一次打开 select 输入,数据将被加载。
当我再次打开 select 时,会重新加载相同的数据。
有什么办法可以防止这种"reloading"的数据?
我的意思是,如果我只是打开 select2 并且之前加载了选项,我不想再次加载。
这是我当前的代码:
$(select_input).select2({
ajax: {
url: url,
dataType: 'json',
quietMillis: 250,
data: function (params) {
return {
term: params.term,
page: params.page,
page_limit: default_page_size
};
},
processResults: function (data) {
return {
results: data.data,
pagination: {
more: (data.page * default_page_size) < data.count
}
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 0,
templateResult: formatTemplateResult,
templateSelection: formatTemplateSelection
});
由于您使用的是 select2_v.4,因此您必须使用 data-adapters
(query
和 initSelection
方法在 V.4.0 中已弃用)
以下是通过称为 AMD-Pattern
的方法使用 custom-data-adapter
的示例。
我没有机会测试它,但我相信这会给你一个继续前进的方向。
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<script>
var cachedData;
$.fn.select2.amd.define('select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
function (ArrayAdapter, Utils) {
function CustomDataAdapter($element, options) {
CustomDataAdapter.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomDataAdapter, ArrayAdapter);
CustomDataAdapter.prototype.query = function (params, callback) {
var retData;
if (cachedData != undefined) // check if data existing in cachedData variable
retData = cachedData;
else {
$.ajax({
url: url,
dataType: 'json',
quietMillis: 250,
data: function (params) {
return {
term: params.term,
page: params.page,
page_limit: default_page_size
};
},
success: function (data) {
retData = {
results: data.data,
pagination: {
more: (data.page * default_page_size) < data.count
}
};
cachedData = retData; // save the retData in a global variable
},
error: function (er) {
debugger;
},
cache: true
});
}
callback(retData);
};
return CustomDataAdapter;
}
);
$(document).ready(function () {
var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');
$("#select1").select2({
tags: true,
dataAdapter: customAdapter,
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 0,
templateResult: formatTemplateResult,
templateSelection: formatTemplateSelection
});
});
</script>
我正在使用 select2 插件 (v4) 并使用 ajax 加载他的选项。
如果我第一次打开 select 输入,数据将被加载。
当我再次打开 select 时,会重新加载相同的数据。
有什么办法可以防止这种"reloading"的数据? 我的意思是,如果我只是打开 select2 并且之前加载了选项,我不想再次加载。
这是我当前的代码:
$(select_input).select2({
ajax: {
url: url,
dataType: 'json',
quietMillis: 250,
data: function (params) {
return {
term: params.term,
page: params.page,
page_limit: default_page_size
};
},
processResults: function (data) {
return {
results: data.data,
pagination: {
more: (data.page * default_page_size) < data.count
}
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 0,
templateResult: formatTemplateResult,
templateSelection: formatTemplateSelection
});
由于您使用的是 select2_v.4,因此您必须使用 data-adapters
(query
和 initSelection
方法在 V.4.0 中已弃用)
以下是通过称为 AMD-Pattern
的方法使用 custom-data-adapter
的示例。
我没有机会测试它,但我相信这会给你一个继续前进的方向。
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<script>
var cachedData;
$.fn.select2.amd.define('select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
function (ArrayAdapter, Utils) {
function CustomDataAdapter($element, options) {
CustomDataAdapter.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomDataAdapter, ArrayAdapter);
CustomDataAdapter.prototype.query = function (params, callback) {
var retData;
if (cachedData != undefined) // check if data existing in cachedData variable
retData = cachedData;
else {
$.ajax({
url: url,
dataType: 'json',
quietMillis: 250,
data: function (params) {
return {
term: params.term,
page: params.page,
page_limit: default_page_size
};
},
success: function (data) {
retData = {
results: data.data,
pagination: {
more: (data.page * default_page_size) < data.count
}
};
cachedData = retData; // save the retData in a global variable
},
error: function (er) {
debugger;
},
cache: true
});
}
callback(retData);
};
return CustomDataAdapter;
}
);
$(document).ready(function () {
var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');
$("#select1").select2({
tags: true,
dataAdapter: customAdapter,
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 0,
templateResult: formatTemplateResult,
templateSelection: formatTemplateSelection
});
});
</script>