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 相关文章推荐
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 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
聊天室php&amp;mysql(四)
2006/10/09 PHP
用PHP读取RSS feed的代码
2008/08/01 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
JavaScript window.location对象
2014/11/14 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
canvas实现钟表效果
2017/02/13 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
升职自荐信
2013/11/28 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
网络技术专业求职信
2014/07/13 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书