一款不錯的多選下拉列表利器—— Ext.ux.form.SuperBoxSelect

時間 2019-12-01

標籤一款不錯下拉列表利器 ext.ux.form.superboxselect ext form superboxselect 简体版

原文原文鏈接

在B/S系統中，下拉列表(select/dropdownlist/combobox)的應用隨處可見,爲了加強用戶體驗,開發人員也經常會作一些帶聯想功能的下拉列表，javascript

特別是數據項比較多的時候，用戶篩選起來就會很容易。php

若是考慮多選的場景，我想如下的實現方式不少時候是可以知足要求的:css

帶複選框(checkbox)的下拉列表，應該是比較直觀和方便了，也很符合用戶的習慣.html

可是若是數據項太多的時候。滾動條會很長,有兩個不足:java

1.用戶查詢本身想要的目標很困難；jquery

2.用戶若是須要選擇的項不少(>10項)，滾動條容易遮擋住，用戶可能也不知道本身到底選了哪些。ajax

因而帶複選框且有聯想功能的多選下拉列表閃亮登場了， Ext.ux.form.SuperBoxSelect數據庫

這款插件確實很好用,筆者也將其應用到了項目中app

這裏給出測試截圖dom

用戶選擇以後能夠看到本身所選，很直觀吧!

插件下載地址:

Live example: http://technomedia.co.uk/SuperBoxSelect/examples3.html

Download: http://www.extjs.com/forum/attachmen...7&d=1263783379

Thread: http://extjs.com/forum/showthread.ph...654#post332654

怎麼使用這個插件，我想示例中是很明瞭的,筆者也作了一個C#版的

ExtJs組件的基礎引用都在母板中

ExtMaster.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="ExtMaster.master.cs"
    Inherits="Lucky.Views.Shared.ExtMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../../Scripts/ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/ext-3.4.0/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
    <script src="../../Scripts/ext-3.4.0/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="../../Scripts/ext-3.4.0/ext-all.js" type="text/javascript"></script>
    <script src="../../Scripts/Widget/CHelper.js" type="text/javascript"></script>

    <asp:ContentPlaceHolder ID="TitleContent" runat="server">
    </asp:ContentPlaceHolder>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

View Code

Vew視圖:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ExtMaster.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    
    <link href="../../Scripts/SuperBoxSelect/superboxselect.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/SuperBoxSelect/states.js" type="text/javascript"></script>
    <script src="../../Scripts/SuperBoxSelect/SuperBoxSelect.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
    body {
        font:13px/1.3 arial,helvetica,clean,sans-serif;
        *font-size:small;
        *font:x-small;
        padding: 20px !important;
    }
    #page {
        width: 700px;
    }
    p {
        color: #333;
        margin-bottom: 7px;
        font-size: 14px;
    }
    form p {
        margin-top: 7px;
    }
    code {
        color: #000;
    }
    #intro p {
        color: #000;
        font-size: 15px;
        margin-bottom: 20px;
    }
    h1 {
        font-size: 1.6em;
        line-height: 2.0em;
        margin-bottom: 0.8em;
    }
    h2 {
        font-size: 1.2em;
        line-height: 1.6em;
        margin-bottom: 0.6em;
    }
    .exForm{
        padding: 20px 20px 20px 0px;
        font-size: 12px;
    }
    .x-tag {
        color: #693;
        background-image: url(tag_green.gif);
        background-repeat: no-repeat;
        background-position:  2px center;
        padding-left: 17px !important;
        *text-indent: 17px !important;
    }
    .x-flag{
        background-image: url(../../Scripts/ext-3.4.0/resources/images/default/s.gif);
        background-repeat: no-repeat;
        background-position:  2px center;
        text-indent: 17px !important;
    }
    body.ext-ie6 .x-flag .x-superboxselect-item-close {
        top: 4px;
        right: 2px;
    }

    .small {
        font-size: small;
    }
    
    #f2Form .x-superboxselect-item-focus {
        color: #fff;
    }
    
</style>
    <script language="javascript" type="text/javascript">

        var tempIdCounter = 0;
        Ext.BLANK_IMAGE_URL = 'http://static.technomedia.co.uk/libs/ext-3.2.0/resources/images/default/s.gif';

        Ext.onReady(function () {


            $("#btnToastWindow").click(function () {

                GetWindow();

            });
        })

    </script>
    <script language="javascript" type="text/javascript">

        /**
        * ajax同步請求
        *獲取用例對象
        */
        function GetSuperSelectData() {

            var obj;
            var value;
            var strUrl = '../SuoperBoxSelect/GetSuperSocketStore';

            if (window.ActiveXObject)
                obj = new ActiveXObject('Microsoft.XMLHTTP');
            else if (window.XMLHttpRequest)
                obj = new XMLHttpRequest;

            obj.open('POST', strUrl, false);
            obj.setRequestHeader('Contnent-Type', 'application/', 'application/x-www-form-urlencoded');
            obj.send(null);
            var oResult = Ext.util.JSON.decode(obj.responseText);

            return oResult;
        }
    
    </script>
    <script language="javascript" type="text/javascript">

        /**
        * form
        */
        function GetForm() {

            var SelectData = GetSuperSelectData();

            //example 5
            var states3 = new Ext.data.SimpleStore({
                fields: ['abbr', 'state', 'nick', 'cls'],
                data: SelectData,
                sortInfo: { field: 'state', direction: 'ASC' }
            });

            var superSelect = new Ext.ux.form.SuperBoxSelect({
                allowBlank: false,
                msgTarget: 'title',
                id: 'selector5',
                xtype: 'superboxselect',
                fieldLabel: 'States',
                resizable: true,
                hiddenName: 'statesHidden[]',
                width: 300,
                store: states3,
                mode: 'local',
                displayField: 'state',
                displayFieldTpl: '{state} ({abbr})',
                valueField: 'abbr',
                navigateItemsWithTab: false,
                value: ['AL', 'AZ']
            });

            var form = new Ext.form.FormPanel({
                frame: true,
                //title: '表單標題',
                style: 'margin:10px',
                items: [superSelect]
            });

            return form;

};

    /**
    * window
    */
    function GetWindow() {

        var form = GetForm();

        var win = new Ext.Window({
            title: '窗口',
            width: 476,
            height: 374,
            items: [form],
            resizable: true,
            modal: true,
            closable: true,
            maximizable: true,
            minimizable: true,
            buttons: [{
                text: '肯定',
                handler: function () {

                    var strValue = Ext.getCmp('selector5').getValue();
                    Ext.Msg.alert("提示", strValue);
                    win.close();
                }
            }, {
                text: '取消',
                handler: function () {

                    Ext.Msg.alert('提示', '取消');
                    win.close();
                }
            }]
        });

        win.show();

    }
    
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Example 5</h2>
    <p>
        This example demonstrates using <code>applyTo</code> to apply the component to an
        existing dom element.</p>
    <input type="button" id="btnToastWindow" value="彈出窗口" />
</asp:Content>

View Code

Controller:

這裏只是構造一些測試數據,能夠根據真是場景從數據庫去數據和組織數據,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Lucky.Models;

namespace Lucky.Controllers
{
    public class SuoperBoxSelectController : Controller
    {
        //
        // GET: /SuoperBoxSelect/

        public ActionResult Index()
        {
            return View();
        }

        #region 獲取多選下拉列表數據源

        /// <summary>
        /// 獲取多選下拉列表數據源
        /// </summary>
        /// <returns></returns>
        public JsonResult GetSuperSocketStore()
        {
            var lstDoubleSuperSelectData = new List<List<string>>();
            var lstSuperSelect = _GetSuperSocketStore();

            foreach(var oSuperSelect in lstSuperSelect)
            {
                var lstSuperSelectData = new List<string>();
                lstSuperSelectData.Add(oSuperSelect.abbr);
                lstSuperSelectData.Add(oSuperSelect.state);
                lstSuperSelectData.Add(oSuperSelect.nick);
                lstSuperSelectData.Add(oSuperSelect.cls);

                lstDoubleSuperSelectData.Add(lstSuperSelectData);
            }

            return Json(lstDoubleSuperSelectData,JsonRequestBehavior.AllowGet);
        }


        private List<CSuperSelect> _GetSuperSocketStore()
        {
            var lstSuperSelect = new List<CSuperSelect>();

            for (var iIndex = 0; iIndex < 10;iIndex++ )
            {
                var strAbbr = string.Format("{0}{1}","abbr",iIndex);
                var strState = string.Format("{0}{1}","state",iIndex);
                var strNick = string.Format("{0}{1}", "nick", iIndex);
                var strCls = string.Format("{0}{1}", "cls", iIndex);

                lstSuperSelect.Add(new CSuperSelect(strAbbr,strState,strNick,strCls));
            }

            return lstSuperSelect;
        }
        #endregion

    }
}

View Code

Model:

 public class CSuperSelect
    {
        public string abbr;
        public string state;
        public string nick;
        public string cls;

        public CSuperSelect(string abbr, string state, string nick, string cls)
        {
            this.abbr = abbr;
            this.state = state;
            this.nick = nick;
            this.cls = cls;
        }
    }