Bootstrap Multiselect 常用组件实现代码


Posted in Javascript onJuly 09, 2017

实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect。

    官方文档:http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html

    如果你英文好一点,里面有详细的介绍,多选框的设置,多选框获取值/文本,选项分组,各种各样丰富的表现方式和获取。

    结合实际项目,加深技术理解,同时也方便自己后续项目中的使用。

    多选框和单选框相同,实际项目中前端不可能将里面的选项很直白的写在展示层面,或多都是取自数据库中的代码表。

    这样耦合低,便于维护;当需要展示的选项发生变化的时候,只需要变更一遍数据库就好,不需要每个页面修改,假如有100个页面放置了单选框或者多选框,画面太惨了。

    动态生成 多选框/单选框 方式我接触的写法有两种,具体好坏,效率问题,仁者见仁智者见智。

    程序设计方式多种多样,看客老爷肯定知道比我这样写更好的,不多说了,上代码。

1.JavaBean 方式,在JSP 页面,嵌入java 代码实现             

<div class="input-append">
          <span class="add-on">bootstrapMultiselect</span><select class="multiselect" multiple="multiple">
          <% for(int i=0;i<list.size();i++){
            Product product = list.get(i);%>
          <option value='<%=product.getId() %>'><%=product.getName() %></option>
          <% } %>
          </select>
        </div>

a.product 定义的基本的属性和 setter 和 getter 是一个纯粹的 pojo 对象;

b.具体的 product 对象的读取,涉及与数据交互,封装方法的数据结构可以使用很多(包括数组、map、list),我这里使用的是 ArrayList<Product>;

c.如果想实现的更合理一点,可以定义数据库访问接口,里面定义各种各样对操作 product 的方法(增,删,改,查....),然后由另外一个类实现这些接口的方法(貌似扯远了,等有时间在说吧);

2.后台数据库交互,前台 JavaScript 动态添加选项

  依赖的具体的 WebMVC 框架为 SpringMvc.

  前台 ajax 请求以及动态生成选项:

$.ajax({
   url : "/" + window.location.pathname.split("/")[1] + '/service/product/init',
   type : 'POST',
   dataType : 'json',
   success : function(data) {
     if (data.success) {
       /**
        * Bootstrap Multiselect 动态赋值选项卡 1 
        */
       var products = data.products;
       $.each(products, function(index, product) {        
         $("#product").append('<option value="' + product.id + '">' + product.name + '</option>');
       });
       /**
        * Bootstrap Multiselect 动态赋值选项卡 2
        */
       var products = data.products;
       var newProducts = new Array();
       var obj = new Object();
       $.each(products, function(index, product) {
         obj = {
           label : product.id,
           value : product.name
         };
         newProducts.push(obj);
       });
        $(".multiselect").multiselect('dataprovider', newProducts);   
     }
   }
 });

 a. 第一种方法去赋值时需要注意的时,多选框要在前面先初始化;

 b. 然后在官方文档的帮助下,找到了第二种方法,需要用到一个 Array,还有一个万能的 object,将后台返回回来的数据封装给object ,然后将object 放入 Array中,最后赋值给多选框;

 c. 后台交互需要一个简单的 sql ,SpringMvc 会将返回回去的 map,转换为 javascript Object 对象, list 转换为 Array 对象;

 d.多选框提交到后台值,你可以选择提交选项文本,选项对应的值,提交选项 code 有优势,具体为code 一般为数字或者字母,而文本一般是汉字,会导致post 到后台的内容过大,需要进行转码,code 在代码表中是唯一的,还有安全性较高;

 e.后台具体的解析方法如下,我项目中具体是进行查询,所以拼接为一个 sql 子句,解析后当然也可以用来更新数据库;           

if(!cxxxjo.getString("product").equals("null") && cxxxjo.getString("product").length() > 0){
          JSONArray productja = JSONArray.fromObject(cxxxjo.getString("product"));
            wherestr += " and t.product in(";
            for(int i = 0;i < productja.size();i++){
              if(i == productja.size()-1){
                wherestr += "'" + productja.get(i).toString()+"'";
              }else{
                wherestr += "'" + productja.get(i).toString()+"',";
              }
            }
            wherestr+=")";
        }

总结

以上所述是小编给大家介绍的Bootstrap Multiselect 常用组件实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
解决JS外部文件中文注释出现乱码问题
Jul 09 #Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 #Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 #jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 #jQuery
详谈javascript精度问题与调整
Jul 08 #Javascript
javascript定时器取消定时器及优化方法
Jul 08 #Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 #Javascript
You might like
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
JS实现放烟花效果
2020/03/10 Javascript
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
便利店促销方案
2014/02/20 职场文书
机关办公室岗位职责
2014/04/16 职场文书
员工保密承诺书
2014/05/28 职场文书
道路施工安全责任书
2014/07/24 职场文书
售票员岗位职责
2015/02/15 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers