selec2组件使用方法

select2组件是一款代搜索功能的html下拉框辅助组件，官方 demo以及文档：http://select2.github.io/examples.html

=》 

最简单的使用方法（前期绑定数据）：

1.在html页面上新建select控件。该select控件可以由asp.net DropDownList控件生成，也可以自己写html，也可以mvc 生成  @Html.DropDownListFort => t.OutHandlerId, ViewBag.Users as List<SelectListItem>)

1 <select name="ddlSelect2Demo" id="ddlSelect2Demo" style="100px;">
2     <option value="1">江苏</option>
3     <option value="2">安徽</option>
4     <option value="3">上海</option>
5     <option value="4">北京</option>
6     <option value="5">浙江</option>
7 </select>

View Code

2.页面引入selec2组件（vs环境下建议使用nuget），包含：select2.min.css、select2.min.js。依赖jquery 1.7以上版本需提前准备

3.在页面加载完毕后使用js 调用select2初始化配置select组件

1 <script type="text/javascript">
2         $document).readyfunction ) {
3             InitSelect2);
4         });
5 
6         function InitSelect2) {
7             $"#ddlSelect2Demo").select2);
8         }
9     </script>

View Code

完整demo（asp.net webForm方式）

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Select2Demo.aspx.cs" Inherits="WebApp_Select2Demo.Select2Demo" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title>Select2Demo</title>
 9 
10     <%--1.nuget引入select2前端组件包--%>
11     <link href="Content/css/select2.min.css" rel="stylesheet" />
12     <script src="Scripts/jquery-1.8.2.min.js"></script>
13     <script src="Scripts/select2.min.js"></script>
14     
15     <script type="text/javascript">
16         $document).readyfunction ) {
17             InitSelect2);
18         });
19 
20         function InitSelect2) {
21             $"#ddlSelect2Demo").select2);
22         }
23     </script>
24 </head>
25 <body>
26     <form id="form1" runat="server">
27     <div>
28         筛选下拉框：
29         <asp:DropDownList ID="ddlSelect2Demo" runat="server" Width="100px"></asp:DropDownList>
30     </div>
31     </form>
32 </body>
33 </html>

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 
 8 namespace WebApp_Select2Demo
 9 {
10     public partial class Select2Demo : System.Web.UI.Page
11     {
12         protected void Page_Loadobject sender, EventArgs e)
13         {
14             ddlSelect2Demo.Items.AddRangenew ListItem[]
15             { 
16                 new ListItem"江苏","1"),
17                 new ListItem"安徽","2"),
18                 new ListItem"上海","3"),
19                 new ListItem"北京","4"),
20                 new ListItem"浙江","5"),
21                 new ListItem"广东","6"),
22                 new ListItem"西藏","7"),
23                 new ListItem"云南","8"),
24                 new ListItem"山东","6"),
25                 new ListItem"青海","7"),
26                 new ListItem"新疆","8"),
27             });
28         }
29     }
30 }

View Code

.net mvc方式也差不多：

在后端Controller写select数据源：ViewBag.Users = new List<SelectListItem>{　　/*下拉框数据*/};

前端绑定数据源：@Html.DropDownListFort => t.OutHandlerId, ViewBag.Users as List<SelectListItem>)

1.在下拉数据量小于1000以下，直接List绑定到select控件，非常简单

2.下拉数据量巨大，>5000情况下，要么用ajax远程json动态读取方法，要么仍用方法1但是总List缓存（根据需求每1h或者每天）

其他注意点：

1.务必加载$”#id”).select2)

2.tags：false（默认）不需添加。若为了true将把新增的name作为id传入后端（所以id类型为string）

下面一段为复杂配置，支持远程ajax、并且对结果进行处理

//初始化页面上的所有select2组件
function InitSelect2) {
    $".goodsNames").select2{
        ajax: {
            //url: "https://api.github.com/search/repositories",
            url: "../Goods/GetGoodsInfoByLikeName",
            dataType: 'json',
            delay: 500,
            data: function params) {
                return {
                    q: params.term,
                };
            },
            processResults: function data) {
                return { results: data };
            },
            cache: true
        },
        escapeMarkup: function markup) { return markup; },
        minimumInputLength: 1,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection,
        tags: !IsOutWarehouse))  //true：允许用户输入新事物名，入库或入库同时出库；false：仅允许选中已有的事物、不需输入新的，出库
    });
}

//卸载页面上的所有select2组件
function DestroySelect2) {
    $".goodsNames").select2'destroy');
}

//select2搜索结果下拉框操作回调
function formatReporepo) {
    if repo != null && repo != undefined) {
        //可获取到接口的其他属性：Quantity等
        if repo.id == repo.text) {
            if IsPositiveFloatrepo.id)) {
                return "";  //禁止事物名为纯数字，防止后端混淆
            } else {
                return repo.text + "（新）";
            }
        } else {
            return repo.text;
        }
    }
}

//select2选中结果操作回调
function formatRepoSelectionrepo) {
    var selectElemName = repo.element.parentNode.name;
    if IsOutWarehouse)) {   //出库不许新增，所以不会出现此情况
        if repo.Quantity <= 0) {
            alert"该事务库存为0，无法出库。请及时采购");
            //TODO:BUG  体验很不好
            //$"select[name='" + selectElemName + "']").val"");
            $"select[name='" + selectElemName + "']").select2).valnull).trigger"change");
            return "";
        }
    } else {
        if IsPositiveFloatrepo.id)) {
            return "";  //禁止事物名为纯数字，防止后端混淆
        } else {
            return repo.text + "（新）";
        }
    }

    //事务存在，则赋值
    if repo.Quantity != undefined) {
        var id = GetIdByElemNameselectElemName);
        $"select[name='WarehouseInOutDetails[" + id + "].GoodsIdOrNameStr']").attr"data-goodsid", repo.id);
        $"input[name='WarehouseInOutDetails[" + id + "].Quantity']").attr"data-stock-num", repo.Quantity);
        $"select[name='WarehouseInOutDetails[" + id + "].UnitId']").valrepo.UnitId);
        $"select[name='WarehouseInOutDetails[" + id + "].TypeId']").valrepo.TypeId);
    }
    return repo.text;
}

View Code 

建议：

1.不要动态加减select控件并绑定select2，会很复杂又bug。即使调用销毁方法也难搞

2.不建议tags，难控制。因为会将name作为id传给后端，比如若用户输入222,后端难以判断222是已存在的id:222呢还是新增的name：222

3.在直接绑定的情况下，allowClear：true  属性会产生X但是点击无效、无法清除。具体原因未知，只能通过绑定时在option里新增一个val=0的无效值、用户选中后、后端再判断该值无效、忽略查询。ajax情况下没问题。

4.若使用ajax来做，当表单处于编辑时就要显示之前新建的下拉框。这时默认不行、必须在此select下增加单个option，<option value=”@Model.SupplierId”>@Model.SupplierName </option>

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

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