web 前端常用组件【03】Bootstrap Multiselect
实际的项目网站中或多或少的或用到多选框,我选用的一款是 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的更多相关文章
- web 前端常用组件【05】ZTree
web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...
- web 前端常用组件【01】Pagination 分页
分页组件几乎是一般网站都会涉及到的组件,网上有很多这样的插件,自己挑来跳去选择了这一款. 官方Demo网址:http://mricle.com/JqueryPagination 功能强大,可扩展性比较 ...
- web 前端常用组件【06】Upload 控件
因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时. 如果是项目经理,需要知道客户将会用什么浏览器来访问系统. 明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件. 本篇文章 ...
- web 前端常用组件【04】Datetimepicker 和 Lodop
web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.c ...
- web 前端常用组件【07】弹出层 Layer
web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感 ...
- web 前端常用组件【02】Select 下拉框
<select id="hello"></select> 关于 select 支持的属性和响应事件,可以参照:http://www.runoob.com ...
- WEB前端常用网站收集
WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap 官网 h ...
- 整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用
整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...
- Web 前端 UI 组件库文档自动化方案 All In One
Web 前端 UI 组件库文档自动化方案 All In One 需求 自动化 动态 好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文 ...
随机推荐
- aspx页面前端使用js 调用aspx.cs后台的方法,不回传
本次使用 Ajax.dll,AjaxPro.dll 两个类库 1.首先添加引用:Ajax.dll,AjaxPro.dll 文件在 Libiary 目录下 2.配置 WebConfig 属性 将 下面2 ...
- Virtual Box 杂记
1. Virtual Box后台运行 a. VBoxManage startvm yourvmname --type headlessb. VBoxHeadless --startvm yourvmn ...
- 【转发】Html5 File Upload with Progress
Html5 File Upload with Progress Posted by Shiv Kumar on 25th September, 2010Senior Sof ...
- Java高级编程之URL处理
Java URL处理 URL(Uniform Resource Locator)中文名为统一资源定位符,有时也被俗称为网页地址.表示为互联网上的资源,如网页或者FTP地址. 本章节我们将介绍Java是 ...
- 4、解决native库不兼容
解决native库不兼容 现象: 报警告 [root@hadoop1 hadoop-]# bin/hdfs dfs -ls /input // :: WARN util.NativeCodeLoade ...
- Hadoop HDFS Basic JAVA API
org.apache.hadoop.fs.FileSystem 是HDFS的文件系统抽象,在分布式系统中管理HDFS文件和目录.文件内容存储在由多个相同大小的块(如64M)构成的datanode节 ...
- DGbroker三种保护模式的切换
1.三种保护模式 – Maximum protection 在Maximum protection下, 可以保证从库和主库数据完全一样,做到zero data loss.事务同时在主从两边提交完成,才 ...
- Autofac全面解析系列(版本:3.5) – [使用篇(推荐篇):1.类型注册]
前言 Autofac Autofac是一套高效的依赖注入框架. Autofac官方网站:http://autofac.org/ Autofac在Github上的开源项目:https://github. ...
- Linux系统监控命令之iotop
iotop命令 iotop命令是一个用来监视磁盘I/O使用状况的top类工具.iotop具有与top相似的UI,其中包括PID.用户.I/O.进程等相关信息.Linux下的IO统计工具如iostat, ...
- win7 telnet
一.telnet连接 1.linux linux下可以通过net stat 查看22端口来确认端口是否开放. 然后在cmd中可通过telnet 10.0.200.151 22来连接. 2.win7 w ...