我一直在尝试创建自定义数据适配器来设置下拉菜单的初始值。我试图从Web api端点获取当前值的详细信息,并用选定的值填充它。
这是我的自定义数据适配器
$.fn.select2.amd.define("CustomCompSelect2DataAdapter",
[
'select2/data/select',
'select2/utils',
'jquery'
],
function (SelectAdapter, Utils, $) {
function CustomCompSelect2DataAdapter($element, options) {
//this.$element = $element;
//this.options = options;
CustomCompSelect2DataAdapter.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomCompSelect2DataAdapter, SelectAdapter);
CustomCompSelect2DataAdapter.prototype.current = function (callback) {
var currentVal = this.$element.val();
var ajaxOptions = this.$element.data(ajaxOptions);
var idField = ajaxOptions.idField;
var txtField = ajaxOptions.txtField;
$.ajax(ajaxOptions.detailURL, {
data: {
id: 1
},
cache: false,
dataType: 'json'
}).done(function (data) {
var data = [];
data.push({
id: data[idField],
text: data[txtField],
compData: data
});
callback(data);
});
};
return CustomCompSelect2DataAdapter;
}
);
ajaxoptions是添加到下拉菜单中的数据属性,它包含id字段,文本字段和网络api网址,以获取项的详细信息。
下面是我使用数据适配器的地方
select2Element.select2({
width: 'element',
minimumInputLength: 1,
placeholder: placeHolderText,
allowClear: false,
readonly: false,
dataAdapter: $.fn.select2.amd.require("CustomCompSelect2DataAdapter"),
ajax: {
url: options.searchURL,
dataType: 'json',
quietMillis: quietMillis,
cache: false,
data: function (params) {
return {
name: params.term,
page: params.page || 1,
pageSize: comboPageSize
};
},
processResults: function (data, params) {
params.page = params.page || 1;
var more = (params.page * comboPageSize) < data.total;
var resultArr = []
for (var i = 0; i < data.result.length; i++) {
resultArr.push({
id: data.result[i][options.idField],
text: data.result[i][options.txtField],
compData: data.result[i]
});
}
return {
results: resultArr,
pagination: {
more: more
}
}
}
},
templateResult: function (data) {
var htmlStr = "<div class='comp-select2-result'>"
var compData = data.compData;
if (compData !== undefined) {
htmlStr += "<b>Company</b>: " + compData.CompanyName + "<br/>";
htmlStr += "<b>Company Type</b>: " + compData.CompanyType.CompanyTypeName + "<br/>";
} else {
htmlStr += "<b>--Select A Company--</b>";
}
htmlStr += '</div>';
return $(htmlStr);
},
templateSelection: function (data) {
if (data !== undefined && data.compData !== undefined) {
return data.compData[options.txtField];
} else
return data;
},
dropdownCssClass: 'bigdropdd'
});
在数据适配器中,我已经硬编码了一个ID值,以查看是否可以预选该值;但它似乎不起作用。谁能指出我正确的方向。
预先感谢