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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
javascript 写类方式之三
Jul 05 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
解决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
MySQL修改密码方法总结
2008/03/25 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
js实现开启密码大写提示
2016/12/21 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
python实时监控cpu小工具
2018/06/21 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
python manage.py runserver流程解析
2019/11/08 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Python使用Matlab命令过程解析
2020/06/04 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
中专毕业生个人职业生涯规划
2014/02/19 职场文书
借款协议书范本
2014/04/22 职场文书
药品营销策划方案
2014/06/15 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL