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解析。