Jquery-Select2控件使用心得

本文转载自：https://www.cnblogs.com/heromoli/p/3820555.html 作者：heromoli 转载请注明该声明。

前段时间使用了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框架，数据以列表形式返回给前台，控件效果：

Jquery-Select2控件使用心得

接下来是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>

生成的效果图 Jquery-Select2控件使用心得

大概的说明看代码注释，initSelection这个参数要重点说下，当时纠结了好久。

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

Jquery-Select2控件使用心得

相关推荐