Jquery-Select2控件使用心得

前段時間使用了Select2控件處理下拉菜單，搞了一整天才搞明白，記錄下心得。參考官網http://ivaynberg.github.io/select2/#documentation

該控件我使用了兩種方式：1、基本用法；2、AJAX用法。

先說第一個基本用法，該方式適用於比較小數據量時，一次把所有數據加載到template里邊的<select>組件，然后由Select2對<select>進行解析，例如：

<select id="system" name="system" style="width:100%" >
    <option value="">請選擇系統-------</option>
        {% for sys in sys_list %}
            <option value={{ sys.id }}>{{ sys.name }}</option>
        {% endfor %}
</select>        

<script>
　　$(document).ready(function () {
　　　　$("#system").select2();
　　});
</script>

我使用了Django框架，數據以列表形式返回給前台，控件效果：

 

接下來是AJAX用法，可以分成兩部分：后台數據源；前台設置。先說后台數據源部分，參考代碼：

def ajax(request):
    """
    AJAX數據源視圖-系統模塊
    """
    start = int(request.GET.get('iDisplayStart', '0'))
    length = int(request.GET.get('iDisplayLength', '30'))
    search = request.GET.get('sSearch', '')  #取得前台控件輸入的關鍵字
    if search:　　　　#截取查詢結果對象，以start開始截取start+length位
        orgs = Info.objects.filter(
            Q(name__icontains=search) & Q(deleted=False)
        )[start:start + length]
    else:
        orgs = Info.objects.all()[start:start + length]   
    val_list = []
    for org in orgs:
        val_list.append({'id': org.id, 'name': org.name}) 
　　"""
　　根據關鍵字查詢得到結果后開始拼裝返回到前台的數據。先生成字典型數組，一般SELECT2組件使用的話生成id、name兩個字段即可
　　"""

    json_data = json.dumps(val_list)
    return HttpResponse(json_data, 'application/json')

前台設置部分代碼：

<script>
            //機構自動搜索
        function resultFormatResult(orgs) {       {# 下拉選項名稱      #}
            return '<div>' + orgs.name + '</div>';
        }

        function resultFormatSelection(orgs) {    {# 選取后顯示的名稱     #}
            return orgs.name;
        }
        $(document).ready(function () {
            $("#company").select2({
                placeholder: "點擊查詢機構",
                minimumInputLength: 2,　　{# 最小查詢參數    #}
                multiple: flase,  　　　　　　{# 多選設置    #}
                ajax: {
                    url: '/admin/organizations/ajax/',  {# ajax后台函數路徑 #}
                    dataType: "json",　　　{# 傳輸的數據類型，一般使用json或jsonp，jsonp比較復雜，需要APIKEY，暫時沒進行研究 #}
                    type: "GET",　　　　　　{# GET即為前台JS向后台函數取數據，POST反之 #}
                    quietMillis: 1000, 　　{# 延時查詢毫秒數 #}
                    data: function (term, page) {
                        return {
　　　　　　　　　　　　　　　　　　　sSearch: term, {# term為前台輸入的查詢關鍵字，保存到sSearch對象，即后台保存關鍵字的對象 #}
　　　　　　　　　　　　　　　　　　　page: 10   {# 每次查詢的結果數 #}

                        };
                    },
                    results: function (data, page) {
                        return {
                            results: data  {# results結果集，data為后台返回的查詢結果 #}
                        };
                    }
                },
                formatSelection: resultFormatSelection,  // 設定查詢樣式
                formatResult: resultFormatResult,　　　　// 設定查詢結果樣式
                dropdownCssClass: "bigdrop", 　　　　// 設定SELECT2下拉框樣式，bigdrop樣式並不在CSS里定義，暫時沒深入研究
                escapeMarkup: function (m) {
                    return m;
                },
　　　　　 　　　 initSelection: function (element, callback) {  {# 默認顯示option項 #}
                    var compName = document.getElementById("companyName").value;var data = {name:compName};
                    callback(data);　　
            });
        });
    </script>

<div class="form-group {% if form.company.errors %} has-error{% endif %}">
            <label class="col-sm-4 control-label">所屬機構</label>
            <div class="col-sm-6"><input id="company" name="company" type='hidden' style="width:100%" class="populate placeholder"
                       value="{{ modify_company.id }}" required="True" />
                <input id="companyName" hidden="hidden" value="{{ modify_company.name }}" />
            </div>
</div>

生成的效果圖

大概的說明看代碼注釋，initSelection這個參數要重點說下，當時糾結了好久。

我使用了一個隱藏的<input id="companyName">存放companyName,然后initSelection可以取其值來callback,然后可見的<input id="company">供Select2解析。