Question

我遇到了一个奇怪的问题。我的Web应用程序中有一个产品选择元素项。因为数据库中有很多产品，所以我决定用select2动态加载它们。问题是我想传递一个与选择框对面显示的附加参数（单位）。所以为了找到一个产品，我使用Django作为后端，我的方法看起来像这样。

class FindProductAjaxView(AjaxableResponseMixin, CreateView):
    model = Product
    form_class = ProductForm

    def get_ajax(self, request, *args, **kwargs):
        query = request.GET.get('q', None)
        if query:
            products = Product.objects.filter(name__icontains=query).values(
                "pk", "name", "unit")
            results = list(products)
            return JsonResponse(data={'items': results}, safe=False)
        else:
            return JsonResponse(data={'success': False,
                                      'errors': 'No mathing items found'})

因此它正确返回pk，名称和单位字段。这是我用来创建select2产品输入的脚本。

<script>
    function initProductSelect2 (select) {
        select.select2({
            placeholder: "Wyszukaj...",
            ajax: {
                url: '/recipes/find_product',
                dataType: 'json',
                delay: 250,
                language: 'pl',
                data: function (params) {
                  return {
                    q: params.term, // search term
                    page: params.page
                  };
                },
                processResults: function (data) {
                    data = data.items.map(function (item) {
                        return {
                            id: item.pk,
                            text: item.name,
                            name: item.name,
                            unit: item.unit
                        };
                    });
                    return { results: data };
                },
                cache: true
          },
          escapeMarkup: function (markup) { return markup; },
          minimumInputLength: 1,
          templateResult: formatItem,
          templateSelection: formatItemSelection
        });
        select.siblings('span').find('.select2-selection').addClass('form-control');
    }

    function formatItem (item) {
        console.log(item)
        if (item.loading) return item.name || item.text;
        var markup = '<div class="clearfix" data-unit=' + item.unit + '>' + item.name + '</div>';
        return markup;
    }

    function formatItemSelection (item) {
        console.log(item);
        return item.name || item.text;
    }
</script>

问题在于formatItem和formatItemSelection方法。传递给formatItem的项目是正常的。它有我需要的所有领域（PK，名称，单位）。但是formatItemSelection中的项目只有id和文本字段。

我几个小时一直在努力解决这个问题，但我不知道。我尝试（如您在代码中看到的）将unit参数作为jQuery数据元素传递，但我不知道如何检索它。如果传递给formatItemSelection的项目具有从控制器传递的所有字段（pk，name，unit），那么最好的解决方案就是。

提前致谢！

编辑：我在最新版本4.0.3中使用select2

Answer 1

好的，我有一个答案。在initProductSelect2（）的上下文中，我创建了一个options对象，该对象填充在ProcessResults中，然后在激活select事件时从那里检索我的选项。我也改变了processResults方法。这是我的更新代码，其中包含一个警告，显示所选产品的单位。我像之前一样初始化我的select2但是使用了第二个参数，例如initProductSelect2(select, [])：

function initProductSelect2 (select, options) {
        select.select2({
            placeholder: "Wyszukaj...",
            ajax: {
                url: '/recipes/find_product',
                dataType: 'json',
                delay: 250,
                language: 'pl',
                data: function (params) {
                  return {
                    q: params.term, // search term
                    page: params.page
                  };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    data.items.forEach(function (entry, index) {
                        entry.id = entry.pk;
                    });
                    options = data.items;
                    return {
                        results: data.items,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                    }
                  };
                },
                cache: true
          },
          escapeMarkup: function (markup) { return markup; },
          minimumInputLength: 1,
          templateResult: formatItem,
          templateSelection: formatItemSelection
        });
        select.on("select2:select", function(e) {
            var id = $(this).val();
            var result = $.grep(options, function(e){ return e.id == id; });
            if (result.length != 0) {
                alert(result[0].unit);
            }
        });
        select.siblings('span').find('.select2-selection').addClass('form-control');
    }

templateResult和templateSelection的select2参数不同（django）

1 个答案: