您所在的位置:小祥子 » 编程 » JavaScript » 正文

JQuery 常用积累(四)Bootstrap Multiselect

时间:2015-07-27 编辑:Orson 来源:CnBlogs

   实际的项目网站中或多或少的或用到多选框,我选用的一款是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);
                        //System.out.println(product.toString());
                    %>
                    <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) {
                /**
                 * 单选框的动态赋值
                 */
                var products = data.products;
                $.each(products, function(index, product) {                
                    $("#product").append('<option value="' + product.id + '">' + product.name + '</option>');
                });
                 
                /**
                 * Bootstrap Multiselect 动态赋值选项卡
                 */
                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. 刚开始实现多选框赋值时,我也想用单选框的赋值的方法,但是尝试后失败了,Bootstrap Multiselect 没有提供那样的方法来生成选项;

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

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

关键词:常用 ul