效果图

我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录标签Tag输入用法。

应用bootstrap模板

基础项目源码下载地址为:

SpringMVC+Shiro+MongoDB+BootStrap基础框架

我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改，实现标签Tag输入用法。

下载引用插件

下载地址:

http://download.csdn.net/detail/q383965374/9880926

下载解压后得到JS文件，放入项目的静态资源目录中。如图:

在页面上引用使用代码:

<script type="text/javascript"src="/res/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>

辅助实体代码

Pic.java

package com.test.domain.entity;import java.util.List;public class Pic {private String id;private String name;private String description;private List<String> tags;//标签public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public List<String> getTags() {return tags;}public void setTags(List<String> tags) {this.tags = tags;}}

JSP页面代码

index.jsp

<%@ include file="./include/header.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
/*bootstrap-tagsinput 样式*/
.bootstrap-tagsinput {background-color: #fff;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);display: inline-block;padding: 5px 6px;color: #555;vertical-align: middle;border-radius: 4px;width: 100%;line-height: 22px;cursor: text;
}.bootstrap-tagsinput input {border: none;box-shadow: none;outline: none;background-color: transparent;padding: 0;margin: 0;width: auto !important;max-width: inherit;
}.bootstrap-tagsinput input:focus {border: none;box-shadow: none;
}.bootstrap-tagsinput .tag {margin-right: 2px;color: white;font-size: 100%;
}.bootstrap-tagsinput .tag [data-role="remove"] {margin-left: 8px;cursor: pointer;
}.bootstrap-tagsinput .tag [data-role="remove"]:after {content: "x";padding: 0px 2px;
}.bootstrap-tagsinput .tag [data-role="remove"]:hover {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2pxrgba(0, 0, 0, 0.05);
}.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
</style><div id="page-wrapper"><div id="page-inner"><div class="row"><div class="col-md-12"><h1 class="page-header">标签Tag用法 <small>后台List接收</small></h1></div></div><!-- /. ROW  --><form class="form-horizontal" id="base"><input type="text" value="${pic.id}" id="id" name="id" hidden/><div class="form-group"><label for="name" class="col-sm-2 control-label">名称:</label><div class="col-sm-10"><input type="text" class="form-control" id="name" name="name" value="${pic.name}"placeholder=""></div></div><div class="form-group "><label class="col-sm-2 control-label">描述:</label><div class="col-sm-10"><textarea id="description" name="description" class="form-control"rows="8">${pic.description}</textarea></div></div><div class="form-group"><label for="tags" class="col-sm-2 control-label">标签:</label><div class="col-sm-6 "><input type="text" class="form-control" id="tags" name="tags"data-role="tagsinput" placeholder="输入标签Enter确认"/></div></div><div class="form-group"><div class="col-sm-6 col-sm-offset-2"><button type="button" class="btn btn-default cancel"data-dismiss="modal">取消</button><button type="button" class="btn btn-primary save"data-loading-text="Saving...">确认</button></div></div></form>  <!-- /. ROW  --></div><!-- /. PAGE INNER  --></div><!-- /. PAGE WRAPPER  --><%@ include file="./include/footer.jsp"%>
<script type="text/javascript"src="/res/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<script type="text/javascript">
/*** jQuery form 扩展获取数据*/
$.fn.formGet = function(opts) {
opts = $.extend({}, opts);
var data = {},els = opts.formGroup ? this.find('[form-group="' + opts.formGroup + '"]') : this.find('[name]');
if (!els || !els.length) {return data;
}var fnSetValue = (function(emptyToNull) {return emptyToNull ? function(obj, propertyChain, value, allowMulti) {value !== '' && _fnObjectSetPropertyChainValue(obj, propertyChain, value, allowMulti)} : _fnObjectSetPropertyChainValue
})(opts.emptyToNull);els.each(function() {var $this = $(this),type = $this.attr('type'),name = $this.attr('name'), // 可能为属性链tag = this.tagName.toLowerCase();if (tag == 'input') {if (type == 'checkbox') {var v = $(this).val();if (v == 'on' || !v) {fnSetValue(data, name, $(this).prop('checked'));} else {$(this).prop('checked') && fnSetValue(data, name, v, true);}} else if (type == 'radio') {this.checked && fnSetValue(data, name, $this.val());} else {fnSetValue(data, name, $this.val());}} else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {fnSetValue(data, name, $this.val());} else {fnSetValue(data, name, $.trim($this.text()));}
});
return data;
};/**  * 内部私有方法  */
var _fnObjectGetPropertyChainValue = function(obj, propertyChain) {  /* 获取属性链的值 */  if (!obj) return;  if (!propertyChain) return obj;  var property,  chains = propertyChain.split('.'),  i = 0,  len = chains.length;  for (;  (property = chains[i]) && i < len - 1; i++) {  if (!obj[property]) return;  obj = obj[property];  }  return obj[property];
},
_fnObjectSetPropertyChainValue = function(obj, propertyChain, value, allowMulti) {  /* 设置属性链的值 */  if (!obj || !propertyChain) return;  var property,  chainObj = obj,  chains = propertyChain.split('.'),  i = 0,  len = chains.length;  for (;  (property = chains[i]) && i < len - 1; i++) {  if (!chainObj[property]) {  chainObj[property] = {};  }  chainObj = chainObj[property];  }  // 改进版：checkbox的多选可以组合为数组  if (!allowMulti || chainObj[property] === undefined) {  chainObj[property] = value;  } else {  var pv = chainObj[property];  if ($.isArray(pv)) {  pv.push(value);  } else {  chainObj[property] = [pv, value];  }  }  return obj;
};  //标签tags的赋值
<c:if test="${pic.tags!=null&&pic.tags.size()>0}">
var tag = "<c:forEach items="${pic.tags}" var="item">${ item},</c:forEach>";
console.log(tag);
$('input[data-role="tagsinput"]').tagsinput('removeAll');
$('input[data-role="tagsinput"]').tagsinput('add', tag);
</c:if>$(document).ready(function () {/*END-保存表单-END*/$('button.save').on('click', function () {debugger;var data = $('#base').formGet();data.tags = data.tags.split(',');$.ajax({type: "POST",url: "/pic/save",contentType: "application/json",data: JSON.stringify(data),success: function (result) {console.log(result);if (!result.code) {alert(result.data);} else {alert(result.msg);}},error: function (result) {alert("出错了，请稍后重试");}});});});</script></body></html>

注意给tags赋值时，和获取时都需要使用js处理一下。注意引用c标签。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

js处理值的代码:

绑定

//标签tags的赋值
<c:if test="${pic.tags!=null&&pic.tags.size()>0}">
var tag = "<c:forEach items="${pic.tags}" var="item">${ item},</c:forEach>";
console.log(tag);
$('input[data-role="tagsinput"]').tagsinput('removeAll');
$('input[data-role="tagsinput"]').tagsinput('add', tag);
</c:if>

获取

var data = $('#base').formGet();data.tags = data.tags.split(',');

还有需要引入样式

<style>
/*bootstrap-tagsinput 样式*/
.bootstrap-tagsinput {background-color: #fff;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);display: inline-block;padding: 5px 6px;color: #555;vertical-align: middle;border-radius: 4px;width: 100%;line-height: 22px;cursor: text;
}.bootstrap-tagsinput input {border: none;box-shadow: none;outline: none;background-color: transparent;padding: 0;margin: 0;width: auto !important;max-width: inherit;
}.bootstrap-tagsinput input:focus {border: none;box-shadow: none;
}.bootstrap-tagsinput .tag {margin-right: 2px;color: white;font-size: 100%;
}.bootstrap-tagsinput .tag [data-role="remove"] {margin-left: 8px;cursor: pointer;
}.bootstrap-tagsinput .tag [data-role="remove"]:after {content: "x";padding: 0px 2px;
}.bootstrap-tagsinput .tag [data-role="remove"]:hover {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2pxrgba(0, 0, 0, 0.05);
}.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
</style>

后台接收代码

indexcontroller.java

package com.test.web.controller;import java.io.IOException;
import java.util.ArrayList;
import java.util.List;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.test.domain.entity.Pic;
import com.test.util.JSONResult;/*** IndexController* * */
@Controller
public class IndexController {@RequestMapping("/")public String index(Model model) throws IOException {model.addAttribute("hostname", "http://127.0.0.1:8080/");Pic pic=new Pic();List<String> tags=new ArrayList<String>();tags.add("足球");tags.add("棒球");tags.add("篮球");pic.setTags(tags);model.addAttribute("pic", pic);return "/index";}@RequestMapping("/pic/save")@ResponseBodypublic JSONResult saveMigrateLine(@RequestBody Pic pic) {//保存pic记录//int result = save(pic);int result =1;return result > 0 ? JSONResult.success("保存成功"):JSONResult.error("保存失败!");}
}

Bootstrap框架----标签Tag输入用法--Bootstrap-tagsinput相关推荐

前端面试汇总（Bootstrap框架）
前端面试汇总(Bootstrap框架) 1 什么是Bootstrap?以及为什么要使⽤Bootstrap? Bootstrap是⼀个⽤于快速开发 Web 应⽤程序和⽹站的前端框架. Bootstrap ...
bootstrap框架学习笔记
bootstrap框架学习笔记 1.Bootstrap简介 2.基本使用 3.容器 4.设备划分 5.栅格系统 6.展示与隐藏 7.其他类前缀 8.组件直接参考开发文档 1.Bootstrap简介 B ...
使用BootStrap框架设置全局CSS样式
一.排版标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...
BootStrap框架模块：BootStrap4基础
BootStrap简介 Bootstrap 是全球最受欢迎的前端开源工具库,它支持Sass混合.响应式矩阵系统和它自带的库分量和分量的JavaScript.基于Bootstrap提供强大的功能,能够让 ...
Bootstrap框架和inconfont、font-awesome使用
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
[布局] bootstrap基本标签总结
文件头: DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
BootStrap框架-旅游网页设计
使用BootStrap框架,设计一个旅游页面其中,使用Carousel轮播图等JavaScript插件,以及导航条等组件完成 <!doctype html> <html lang= ...
前端Bootstrap框架
Bootstrap框架第1节学习目标能够创建bootstrap的模板能够使用boostrap的两种布局容器能够理解bootstrap的响应式布局的特点能够查询文档创建bootstrap的按 ...
JavaScript—使用bootstrap框架做一个网页
这是通过黑马程序员的教程进行学习的.以下是做一个网页的流程. 目录第一步分析:分析网页--将网页分成若干部分第二步实现: 1-头部 2-导航条 3-注册页面 4-网站底部1 5-网站底部2 6- ...

Bootstrap框架----标签Tag输入用法--Bootstrap-tagsinput

效果图

下载引用插件

辅助实体代码

JSP页面代码

后台接收代码

Bootstrap框架----标签Tag输入用法--Bootstrap-tagsinput相关推荐

最新文章

热门文章