Bootstrap Multiselect 常用组件实现代码

2024-02-16 16:52:03 170

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

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

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

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

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

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

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

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

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


bootstrapMultiselect
<%for(inti=0;i
'><%=product.getName()%>
<%}%>

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

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

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){
/**
*BootstrapMultiselect动态赋值选项卡1
*/
varproducts=data.products;
$.each(products,function(index,product){
$("#product").append(''+product.name+'');
});
/**
*BootstrapMultiselect动态赋值选项卡2
*/
varproducts=data.products;
varnewProducts=newArray();
varobj=newObject();
$.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,转换为javascriptObject对象，list转换为Array对象；

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

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

if(!cxxxjo.getString("product").equals("null")&&cxxxjo.getString("product").length()>0){
JSONArrayproductja=JSONArray.fromObject(cxxxjo.getString("product"));
wherestr+="andt.productin(";
for(inti=0;i
总结
以上所述是小编给大家介绍的BootstrapMultiselect常用组件实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

Bootstrap Multiselect 常用组件实现代码

热门推荐

随机推荐