Heim >Web-Frontend >js-Tutorial >Einfache Verwendung der bidirektionalen Auswahlsteuerung von jQuery, Bootstrap Dual Listbox_jquery

Einfache Verwendung der bidirektionalen Auswahlsteuerung von jQuery, Bootstrap Dual Listbox_jquery

WBOY
WBOYOriginal
2016-05-16 15:26:093196Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung der Zwei-Wege-Auswahlsteuerung Bootstrap Dual List vorgestellt. Bootstrap Dual List ist ein für die Reaktion auf Twitter optimiertes Listenfeld. Es kann auf allen modernen Browsern und Touch-Geräten verwendet werden mit allen, die Details sind wie folgt:

Rendering:

1. Verwendung

1. CSS- und JS-Dateien zitieren

 <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
  <!--<link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet">-->
  <link href="scripts/duallistbox/bootstrap-duallistbox.min.css" rel="stylesheet" />
  <script src="scripts/jquery/jquery-2.1.4.min.js"></script>
  <script src="scripts/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <!--<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>-->
  <script src="scripts/duallistbox/jquery.bootstrap-duallistbox.min.js"></script>

2. Initialisieren Sie das ausgewählte Element, dessen Klassenattribut demo1 ist

<script type="text/javascript">
    $(function () {
      var demo2 = $('.demo1').bootstrapDualListbox({
        nonSelectedListLabel: 'Non-selected',
        selectedListLabel: 'Selected',
        preserveSelectionOnMove: 'moved',
        moveOnSelect: false,
        nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
      });

      $("#showValue").click(function () {
        alert($('[name="duallistbox_demo1"]').val());
      });
    });
  </script>

3. HTML-Code

<div class="col-md-7">
    <select multiple="multiple" size="10" name="duallistbox_demo1" class="demo1">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3" selected="selected">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6" selected="selected">Option 6</option>
      <option value="7">Option 7</option>
      <option value="8">Option 8</option>
      <option value="9">Option 9</option>
      <option value="10">Option 10</option>
    </select>
    <br />
    <input id="showValue" type="button" value="show selected data" />
  </div>

Damit ist der Plug-in-Aufruf abgeschlossen

2. Erweiterung

Eine allgemeine js-Funktion, die Daten initialisiert:

/*初始化duallistbox*/
    //queryParam1:参数
    //selectClass:select元素class属性
    //selectedDataStr:选中数据,多个以,隔开
    function initListBox(queryParam1,selectClass, selectedDataStr) {
      var paramData = {
        'testParam1': queryParam1
      }
      $.ajax({
        url: 'DataHandler.ashx',
        type: 'get',
        data: paramData,
        async: true,
        success: function (returnData) {
          var objs = $.parseJSON(returnData);
          $(objs).each(function () {
            var o = document.createElement("option");
            o.value = this['id'];
            o.text = this['name'];
            if ("undefined" != typeof (selectedDataStr) && selectedDataStr != "") {
              var selectedDataArray = selectedDataStr.split(',');
              $.each(selectedDataArray, function (i, val) {
                if (o.value == val) {
                  o.selected = 'selected';
                  return false;
                }
              });
            }
            $("." + selectClass + "")[0].options.add(o);
          });
          //渲染dualListbox
          $('.' + selectClass + '').bootstrapDualListbox({
            nonSelectedListLabel: 'Non-selected',
            selectedListLabel: 'Selected',
            preserveSelectionOnMove: 'moved',
            moveOnSelect: false//,
            //nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
          });
        },
        error: function (e) {
          alert(e.msg);
        }
      });
    }

HTML-Code:

<div class="col-md-7">
    <select multiple="multiple" size="10" name="duallistbox_demo2" class="demo2">
    </select>
    <br />
    <input id="showValue" type="button" value="show selected data" />
  </div>

Anruf:

$(function () {
      //初始化
      initListBox('hangwei.cnblogs.com', 'demo2');

      $("#showValue").click(function () {
        alert($('[name="duallistbox_demo2"]').val());
      });
    });

DataHandler.ashx-Code:

<%@ WebHandler Language="C#" Class="DataHandler" %>

using System;
using System.Web;
using System.Collections.Generic;
using Newtonsoft.Json;

public class DataHandler : IHttpHandler {
  
  public void ProcessRequest (HttpContext context) {
    var china = new { id = "China", name = "中国" };
    var usa = new { id = "USA", name = "美国" };
    var rsa = new { id = "Russia", name = "俄罗斯" };
    var en = new { id = "English", name = "英国" };
    var fra = new { id = "France", name = "法国" };
    List<object> list = new List<object>();
    list.Add(china);
    list.Add(usa);
    list.Add(rsa);
    list.Add(en);
    list.Add(fra);
    string returnJson = JsonConvert.SerializeObject(list);
    context.Response.ContentType = "text/plain";
    context.Response.Write(returnJson);    
  }
 
  public bool IsReusable {
    get {
      return false;
    }
  }

}

Wirkung:

Die in der Demo dieses Artikels verwendete Entwicklungsumgebung: VS2013, .NET Framework4.5.

Im Folgenden erfahren Sie, wie Sie die Zwei-Wege-Auswahlsteuerung Bootstrap Dual Listbox verwenden. Ich hoffe, dass dies für das Lernen aller hilfreich sein wird.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn