Jquery-Select2控件使用心得

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

該控件我使用了兩種方式：一、基本用法；二、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解析。