实际的项目网站中或多或少的或用到多选框,我选用的一款是 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+=")";
}

web 前端常用组件【03】Bootstrap Multiselect的更多相关文章

  1. web 前端常用组件【05】ZTree

    web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...

  2. web 前端常用组件【01】Pagination 分页

    分页组件几乎是一般网站都会涉及到的组件,网上有很多这样的插件,自己挑来跳去选择了这一款. 官方Demo网址:http://mricle.com/JqueryPagination 功能强大,可扩展性比较 ...

  3. web 前端常用组件【06】Upload 控件

    因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时. 如果是项目经理,需要知道客户将会用什么浏览器来访问系统. 明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件. 本篇文章 ...

  4. web 前端常用组件【04】Datetimepicker 和 Lodop

    web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.c ...

  5. web 前端常用组件【07】弹出层 Layer

    web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感 ...

  6. web 前端常用组件【02】Select 下拉框

    <select id="hello"></select>   关于 select 支持的属性和响应事件,可以参照:http://www.runoob.com ...

  7. WEB前端常用网站收集

    WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap  官网  h ...

  8. 整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用

    整理部分JS 控件  WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...

  9. Web 前端 UI 组件库文档自动化方案 All In One

    Web 前端 UI 组件库文档自动化方案 All In One 需求 自动化 动态 好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文 ...

随机推荐

  1. aspx页面前端使用js 调用aspx.cs后台的方法,不回传

    本次使用 Ajax.dll,AjaxPro.dll 两个类库 1.首先添加引用:Ajax.dll,AjaxPro.dll 文件在 Libiary 目录下 2.配置 WebConfig 属性 将 下面2 ...

  2. Virtual Box 杂记

    1. Virtual Box后台运行 a. VBoxManage startvm yourvmname --type headlessb. VBoxHeadless --startvm yourvmn ...

  3. 【转发】Html5 File Upload with Progress

    Html5 File Upload with Progress               Posted by Shiv Kumar on 25th September, 2010Senior Sof ...

  4. Java高级编程之URL处理

    Java URL处理 URL(Uniform Resource Locator)中文名为统一资源定位符,有时也被俗称为网页地址.表示为互联网上的资源,如网页或者FTP地址. 本章节我们将介绍Java是 ...

  5. 4、解决native库不兼容

    解决native库不兼容 现象: 报警告 [root@hadoop1 hadoop-]# bin/hdfs dfs -ls /input // :: WARN util.NativeCodeLoade ...

  6. Hadoop HDFS Basic JAVA API

      org.apache.hadoop.fs.FileSystem 是HDFS的文件系统抽象,在分布式系统中管理HDFS文件和目录.文件内容存储在由多个相同大小的块(如64M)构成的datanode节 ...

  7. DGbroker三种保护模式的切换

    1.三种保护模式 – Maximum protection 在Maximum protection下, 可以保证从库和主库数据完全一样,做到zero data loss.事务同时在主从两边提交完成,才 ...

  8. Autofac全面解析系列(版本:3.5) – [使用篇(推荐篇):1.类型注册]

    前言 Autofac Autofac是一套高效的依赖注入框架. Autofac官方网站:http://autofac.org/ Autofac在Github上的开源项目:https://github. ...

  9. Linux系统监控命令之iotop

    iotop命令 iotop命令是一个用来监视磁盘I/O使用状况的top类工具.iotop具有与top相似的UI,其中包括PID.用户.I/O.进程等相关信息.Linux下的IO统计工具如iostat, ...

  10. win7 telnet

    一.telnet连接 1.linux linux下可以通过net stat 查看22端口来确认端口是否开放. 然后在cmd中可通过telnet 10.0.200.151 22来连接. 2.win7 w ...