select2 4个自定义dataadapter ajax

时间:2018-08-05 05:59:59

标签: jquery-select2-4

我一直在尝试创建自定义数据适配器来设置下拉菜单的初始值。我试图从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值,以查看是否可以预选该值;但它似乎不起作用。谁能指出我正确的方向。

预先感谢

0 个答案:

没有答案