实际的项目网站中或多或少的或用到多选框,我选用的一款是 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. Java Gradle入门指南之内建与定制任务类(buildSrc、Groovy等)

        上一篇随笔介绍了Gradle的安装与任务管理,这篇着重介绍Gradle的内建任务(in-built tasks)与自定义任务(custom tasks),借助Gradle提供的众多内建任务类型 ...

  2. js平滑返回顶部代码

    随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...

  3. 抛弃NVelocity,来玩玩Razor

    对于内容型,不易变动的东西我们都希望给它来个静态化,还有种情况就是比如新浪云不支持.net,为了能跑起我们的网站, 只能放些静态页面上面,外加jsonp来实现交互,我们知道.net中有很多模板引擎,但 ...

  4. SQL Server中的锁的简单学习

    简介 在SQL Server中,每一个查询都会找到最短路径实现自己的目标.如果数据库只接受一个连接一次只执行一个查询.那么查询当然是要多快好省的完成工作.但对于大多数数据库来说是需要同时处理多个查询的 ...

  5. Rac grid用户启停监听报错无权限

    [grid@max1 ~]$ lsnrctl stop LSNRCTL for Linux: Version 11.2.0.3.0 - Production on 04-NOV-2016 00:20: ...

  6. java 中的volatile

    本博客摘录自   http://www.infoq.com/cn/articles/java-memory-model-4/ 当我们声明共享变量为volatile后,对这个变量的读/写将会很特别.理解 ...

  7. IDENT_CURRENT ,@@identity,SCOPE_IDENTITY() 之间对比

    获取表的标识值,有3种比较常见的用法 IDENT_CURRENT ,@@identity,SCOPE_IDENTITY(),有啥不一样呢? 3个关键字在联机手册中的解释   IDENT_CURRENT ...

  8. Nginx问题定位之监控进程异常退出

    nginx在运行过程中是否稳定,是否有异常退出过?这里总结几项平时会用到的小技巧. 1. 在error.log中查看是否有signal项,如果有,看看signal是多少. 比如,这是一个异常退出的情况 ...

  9. ReactNative之坑爹的在线安装

    编译一个github上ReactNative应用,根据说明只有3步: npm installreact-native run-androidenjoy 但几个步骤实在是一波三折充满着坎坷,一点都不en ...

  10. 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;