2017-05-08 6 views
3

私には奇妙な問題があります。私は、Webアプリケーションに商品選択要素の項目があります。データベースには非常に多くの製品があるので、select2を使って動的にロードすることに決めました。問題は、選択ボックスの反対側に表示される追加パラメータ(Unit)を渡したいということです。だから製品を見つけるために私はバックエンドとしてDjangoを使用し、私のメソッドはこのように見えます。templateResultとtemplateSelectionの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、name、およびunitフィールドが正しく返されます。ここでは、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> 

問題がformatItemformatItemSelectionメソッド内にあります。 formatItemに渡された項目はOKです。それは私が必要とするすべてのフィールド(pk、名前、ユニット)を持っています。しかし、formatItemSelectionに入る項目には、idフィールドとテキストフィールドしかありません。

私はこの問題に数時間苦労してきましたが、わかりません。私は(あなたがコードで見てきたように)unitパラメータをjQueryデータ要素として渡そうとしましたが、それを取得する手がかりがありません。最高の解決策は、formatItemSelectionに渡された項目がコントローラから渡されたすべてのフィールド(pk、name、unit)を持つ場合です。

ありがとうございます!

編集:私は、私は答えを持っている最新バージョン4.0.3

答えて

1

オクラホマでSELECT2を使用しています。 initProductSelect2()のコンテキストではProcessResultsに値が設定されたoptionsオブジェクトを作成し、selectイベントが発生したときにそこからオプションを取得します。私はprocessResultsメソッドも変更しました。ここでは、選択した製品のユニットを表示する警告が表示されます。私は以前のようにselect2を初期化しますが、このような第2のパラメータは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'); 
    } 
関連する問題