263月

select2 使用教程(简)

即将到来的久的select2可插件,论文摘要笔法。当我觉得select2归咎于特殊好,但你不克不及找到任何人甚至更好的下拉框可插件。

在我的聪明的人里有2个版本的select2,最新释放具有一点点新的独特性,现代化的办法决定因素,比原始的版本似地租,按照最新的版本。

官网: 

演示:

因视频博客零碎,我们家不得不演示任何人复杂的作用。。

任何人档案必要引见。、(版本)及外面的

最新释放的select2假设援用的jquery版本较低的话,有些作用不克不及合格的运用。。譬如:重排功用allowClear: true

请运用最新的版本拉环(当地的传达可以运用输出,但ajax长途传达必要的运用select)

二.placeholder

占位符占位符原文激励,假设你必要重排功用,此后占位符必要的设置。

三。重读本地的传达

select2默许的传达属性是id、text,新释放可以定做,但它是甚至更好地运用默许的。。到这程度,最好将JSON替换为id。、原文整队,自然,你可以添加剩余部门的属性。

var data = [{ id: 0, text: 托起 }, { id: 1, text: '笔误' }, { id: 2, text: 复本 }, { id: 3, text: 无效的 }, { id: 4, text: ''wontfix'' }];
$("#c01-select").select2({
  data: data,
  placeholder:请选择,
  allowClear:true
})

四。长途传达重读

$("#c01-select").select2({
  ajax: {
    url: "",
    dataType: ''json'',
    delay: 250,
    data: function (决定因素) {
      return {
        q: ,
      };
    },
    processResults: function (传达) {
      return {
        results: data
      };
    },
    cache: true
  },
  escapeMarkup: function (徽章) { return markup; }, 
  minimumInputLength: 1,
  templateResult: formatRepo, 
  templateSelection: formatRepoSelection 
});

阐明:

     1.q: 查询决定因素(在输出框的使满意表现),问到耐用的的决定因素名声;因而,在在这里你可以添加自定义决定因素,如:典型:'person)

     中results: 传达复发的传达(复发终极的传达归结为),假设我的传达辞谢了,此后复发。这是该耐用的复发的JSON互插)

      有大约个角色必要在最小查询,与之互插的maximumSelectionLength表现最大输出限度局限。

    使具有特征本义处置

     复发归结为回调function formatRepo(repo){return },这将复发原文显示归结为的下拉框,自然,你可以回1;诸如此类。

     选中项回调function formatRepoSelection(repo){return }

    7。反面 JSON体式:select2默许json体式为【{编号:1,原文中}:,{编号:2,原文中}:],对这种体式的刚硬的询问的新释放,自然,您可以添加任何人列。,如:【{编号:1,击中要害刻:,名声:'liu}

五。被选出而尚未上任的的停止控告

六。排空的选择和设置是不行过的

七。使更多的

$("#c01-select").select2({
  传达:传达,
  multiple: true
});

多选演示:

选择视频博客零碎演示的脚底说辞

八.下面复杂阐明新版本与老版相同的

1。归结为回调并选择回调名声:formatResult、formatselection(旧版);templateResult、templateSelection(新版本)

2。设定初值:

//新版本,直线给select添加option
(# ID)。添加物new Option("Jquery", 10001, false, true)); //或许 (# ID)。添加物"");

获取或设置任何人值,3。:select2(“val”)(老版);$(“select”).val((全新版本)

建议运用

var res = $("#id").select2("data");
//复发的限制,听[ 0 ]接收器;这么样做的红利是假设你不出版就可以获益身份证。、原文还可以获益剩余部门属性,如res[0].names

禁用或启用4。:$(“select”).enable(false);(老版);$(“select”).prop(“disabled”, true(全新版本)

5。以奇想主题布置的风骨:风骨的新释放已现代化,但假设你想运用的品位的旧版本,你可以设置以奇想主题布置的 “classic”

Select2把持引见

这可插件是鉴于选择的放大,可以供奉更丰满的功用和用户体会,GitHub官方网站地址,详细的运用判例,可以咨询。:examples.html。

我们家在所有的边框,运用select2把持显示大方的的处置使满意,下拉列表中包罗收音机(包罗大量落下选择框)、重行获选的下拉列表、树下拉列表等。,归结为如次所示。

1)主编相间的下的职责、城市、大量落下连接效应的使用区域,选择职责,该市将重读呼应的职责,选择城市,将持续承载城市病室,为了意识到多级相干的下拉列表的冲击。

2)数的主编下拉列表相间的

但当我们家选择任何人使满意,零碎无意识的显示不注意选择的列表传达。,异常眼睛的资助者,如次所示。

3)任何人树状列表的下拉列表

有时候,我们家的一点点传达能够有阶段相干。,这么样的机构、排行榜诸如此类。

2、对select2把持编码的现实运用辨析

1)相间的编码和作用

运用select2把持,普通是在裁决的select把持上,设置单击(设置IT类)select2)。

假设列表是常作复合词的,这是设置其使满意的选择,如次所示。

复杂的select2把持设定初值编码如次所示。

(档案)。预备好function() {
  $(".js-example-basic-single").select2();
});

普通情况下,假设容许反省多个停止控告,此后将多设置为多个,如下面的编码所示。

<select id="ResponseDemand" name="ResponseDemand" multiple="multiple" class="form-control select2">select>

2)异步传达绑定作用

普通情况下,我们家的select把持的传达,它是从传达库静态重读的。,到这程度通常是ajax获取传达并绑定传达的方法。。

鉴于编码重用性的思索,我们家写了任何人行js作用,添加绑定作用编码,预付款编码的可重用性。

这么样,组合艺术品公共模块的传达字典,它可以经过以下处置可更远地包。

//把字典的使满意到称呼委任的把持function BindDictItem(ctrlName, dictTypeName) {
    var url = ''/DictData/GetDictJson?dictTypeName='' + encodeURI(dictTypeName);
    BindSelect(ctrlName, URL)
}

因而我们家设定初值select2 把持,静态绑定呼应的字典值或剩余部门传达。,它可以经过以下设定初值编码意识到。BindDictItem是直线组合艺术品词典使满意的作用,bindselect是收集和鉴于URL的传达绑定,而$(#省),(使变酸, function (e) 这作用,是选择使不同的联动作用。

//设定初值字典传达(下拉列表)function InitDictItem() {
            //咨询作业的一份            
            BindDictItem("Area","行情分区");
            BindDictItem("Industry", "客户信仰");
            BindDictItem("Grade","客户水平仪");
            BindDictItem("CustomerType", "客户典型");
            BindDictItem("Source", "客户根源");
            BindDictItem("CreditStatus", "信用等级");
            BindDictItem("Stage",客户阶段);
            BindDictItem("Status", "客户遗产");
            BindDictItem("Importance",  "要紧水平仪");     
            
            // 组合艺术品省、城市、病室(联动处置)
            BindSelect("Province", "/Province/GetAllProvinceNameDictJson");
            $(#省),(使变酸, function (e) {
                var provinceName = (#省).val();
                BindSelect("City", "/City/GetCitysByProvinceNameDictJson?provinceName="+ provinceName);
            });

            $(#城),(使变酸, function (e) {
                var cityName = (#城).val();
                BindSelect("District", "/District/GetDistrictByCityNameDictJson?cityName="+ cityName);
            });
        }

此外MVC把持器复发的传达。,我们家复发任何人列表的JSON传达的前端年史,它们的传达体式如次所示。

[ { "Text": "", "Value": "" }, { "Text": "专题讨论会", "Value": "专题讨论会" }, { "Text": "同伴引见", "Value": "同伴引见" }, { "Text": "广告媒体", "Value": "广告媒体" } ]

在前端年史绑定到select2把持,运用JSON女朋友的属性可以。

把持器的意识到编码如次:

3)绑定作用树列表

属性列表,作为公司、发生性关系传达,如机关机构等。,这是任何人同类的的绑定作用,如下面的编码所示。

然而他们复发的传达,我们家把它用作缩进显示。。

[ { "Text": "爱奇迪圆", "Value": "1" }, { "Text": " 广州分行", "Value": "3" }, { "Text": " 上海分行", "Value": "4" }, { "Text": " 英卓培训北京分公司", "Value": "5" } ]

或如次图所示

[ { "Text": "广州分行", "Value": "3" }, { "Text": "总操控", "Value": "6" }, { "Text": "财务处", "Value": "7" }, { "Text": "工程部", "Value": "8" }, { "Text": "本领研发部", "Value": "9" }, { "Text": 任何人圆的开展, "Value": "14" }, { "Text": 这两个组的开展, "Value": "15" }, { "Text": "  考查组", "Value": "16" }, { "Text": "行情部", "Value": "10" }, { "Text": "  行情影片", "Value": "23" }, { "Text": "  行情二部", "Value": "24" }, { "Text": "下有多个分社的旅行社部", "Value": "11" }, { "Text": "出示部", "Value": "12" }, { "Text": "人文资源部", "Value": "13" } ]

居第二位的部门总结,我们家可以注意他们的原文使满意。,按照空白的阶段添加,这么意识到了阶段构成的显示。。

但从这相间的的冲击,这种医生不注意EasyUI。,下拉列表显示好树,或许可以使用甚至更好的Bootstrap可插件停止这树形使满意的表明。

  

4)select2把持的分给处置

下面刻画的办法,都是引见select2把持的设定初值,绑定传达,假设该连接的设定初值,我们家主编时期绑定的值,您必要将值分命运把持。,让它显示出必要表明真正的停止控告。。

如以下所示办法空把持。

//结算的select2把持值
            $("#PID").select2("val", "");
            $("#Company_ID").select2("val", "");
            $("#Dept_ID").select2("val", "");

假设把持数量,必要重排,你可以运用设置

var select2Ctrl = [区域],"Industry","Grade","CustomerType","Source","CreditStatus","Stage","Status","Importance"];
            $.each(select2Ctrl, function (i, 停止控告) {
                var ctrl = $("#" + 停止控告);
                ("val", "");
            });

给Select2 把持分派,让它显示呼应的使满意项值。,这么样的作用是同类的于下面。

                 $("#CustomerType").select2("val", );
                 $("#Grade").select2("val", );
                 $("#CreditStatus").select2("val", );
                 $("#Importance").select2("val", );
                 $("#IsPublic").select2("val", );

假设你必要任何人大量落下显示,它添加了任何人onchange作用的处置能,诸如分给处置大量落下编码如次。

组合艺术品多个列表项的传达。

从这件事我们家可以看出版。,Select2帮助大方的的面值选择,当他们是得救的,他们是用逗号隔开,假设我们家必要显示多个贮存在提姆的主编记载,你必要将任何人使具有特征串替换成任何人限制列表的一直组合艺术品,如次所示。

$("#Permission").select2("val", ('',''));

足够维持两集成相间的的冲击,供咨询。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注