Jquery双向select控件Bootstrap Dual Listbox

效果预览:

Jquery双向select控件Bootstrap Dual Listbox

一. 下载插件

github地址: https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox

也可以在这个网站中下载: http://www.virtuosoft.eu/code/bootstrap-duallistbox/ (排版很好,推荐做为API参考地址)

二. 使用

引用css和js文件:

     <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> 

初始化class属性为demo1的select元素:

     <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> 

HTML代码

      <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> 

这样就完成了插件的调用。

三. 扩展

一个通用的,初始化数据的js函数:

         /*初始化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代码:

     <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> 

调用:

         $(function () {             //初始化             initListBox('hangwei.cnblogs.com', 'demo2');              $("#showValue").click(function () {                 alert($('[name="duallistbox_demo2"]').val());             });         }); 

DataHandler.ashx代码:

  <%@ 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;         }     }  }  View Code

效果:

Jquery双向select控件Bootstrap Dual Listbox

四. 总结

1. 关于jquery版本问题,我自己写的demo使用的是1.10.2,实际上,只要jquery版本大于1.9.1即可,主要是匹配Bootstrap3.3.5版本需求的最低jquery版本。

另外,如果忽略Bootstrap报错,1.8.2版本也是可行的,控件渲染没有问题。

2. 本文demo使用的开发环境: VS2013 ,.NET Framework4.5

demo下载

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » Jquery双向select控件Bootstrap Dual Listbox

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址