文档章节

Jquery-Select2控件使用心得

浮躁的码农
 浮躁的码农
发布于 2015/12/24 10:05
字数 748
阅读 415
收藏 6

前段时间使用了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解析。

本文转载自:http://www.cnblogs.com/heromoli/p/3820555.html

浮躁的码农

浮躁的码农

粉丝 72
博文 865
码字总数 158123
作品 0
松江
程序员
私信 提问
使用jquery实现权限添加的效果

两个列表都可以多选, 实现如下效果: 1、双击第一个列表中任意一个列表项,实现向下添加 2、双击第二个列表中任意一个列表项,实现删除,山东海运青岛港推动经济新发展 2、点击按钮,实现对...

墙头草
2011/08/31
0
0
jeesite框架思维导图

工欲善其事,必先利其器!工匠想要使他的工作做好,一定要先让工具锋利。要做好一件事,准备工作非常重要。刚刚接触jeesite,觉得还不错,可其技术涉及 1、后端 * 核心框架:Spring Framewor...

zerov
2016/06/27
6.6K
8
jquery select2()的用法

用jquery的select2()插件写了一个自动补全的搜索框,jquery版本是:1.10.2 select2()版本是3.5.4 部分代码如下:只要加上ajax属性就报:Uncaught Error: Option 'ajax' is not allowed for Sele......

easonjiven
2015/09/02
14.3K
2
jQuery取得select选择的文本与值

jquery获取select选择的文本与值 获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取selec......

donny945
2014/10/10
0
0
6月份最受欢迎的 15 个新的 jQuery 插件

每个月我们都会将上个月最新的和最受欢迎一些 jQuery 插件推荐给大家,现在让我们来看看上个月的最新热门 jQuery 插件吧。 1. jQuery++ jQuery++ 在 jQuery 1.7.x 的基础上增加了一些 DOM 助...

oschina
2012/07/04
5.1K
5

没有更多内容

加载失败,请刷新页面

加载更多

nproc systemd on CentOS 7

Increasing nproc for processes launched by systemd on CentOS 7 Ask Question I have successfully increased the nofile and nproc value for the local users, but I couldn't find a p......

MtrS
今天
3
0
了解微信小程序下拉刷新功能

小程序提供了这个事件。 onPullDownRefresh() 监听用户下拉刷新事件。 如果要开启下拉刷新功能,要先到json配置: "enablePullDownRefresh":true 配置后下拉有反应了但是没有加载效果,在onP...

oixxan__
今天
2
0
springmvc java对象转json,上传下载(未完)拦截器Interceptor以及源码解析(未完待续)

package com.atguigu.my.controller;import java.util.Collection;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contr......

architect刘源源
今天
30
0
[日更-2019.5.24、25、26] Android系统中的Binder通信机制分析(一)--servicemanager

声明 其实对于Android系统Binder通信的机制早就有分析的想法,记得去年6、7月份Mr.Deng离职期间约定一起对其进行研究的,但因为我个人问题没能实施这个计划,留下些许遗憾... 最近,刚好在做...

Captain_小馬佩德罗
昨天
24
0
聊聊dubbo的DataStore

序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多