我们经常需要在不跳转页面的情况下新增录入的交互。
本章记录弹出层录入的交互方式。
效果如图:
我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录 check选择。
应用bootstrap模板
基础项目源码下载地址为:
SpringMVC+Shiro+MongoDB+BootStrap基础框架
我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改,实现 check选择,传给后台保存成List用法。
完整的jsp代码
<%@ include file="./include/header.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="cf" uri="com.data.web.view.function" %>
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
弹出层<small>录入</small>
</h1>
</div>
</div>
<!-- /. ROW -->
<div class="row">
<div class="col-md-12">
<button id="addDoc" type="button" class="btn btn-success pull-left">新增</button>
</div>
<div class="col-md-12" style="margin-top: 20px">
<label>页面内容</label>
</div>
</div>
<!-- /. ROW -->
</div>
<!-- /. PAGE INNER -->
<%--modal--%>
<div class="modal fade" id="modal_form" tabindex="-1" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<form class="form-horizontal">
<div class="modal-content">
<input type="hidden" name="id"/>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">添加联系人</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="title" class="col-sm-3 control-label">名字</label>
<div class="col-sm-6 input-group" style="padding-left: 0;">
<label>
<input type="text" class="form-control" id="name" name="name"
style="width: 350px;"/>
</label>
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">电话</label>
<div class="col-sm-6 input-group" style="padding-left: 0;">
<label>
<input type="text" class="form-control" id="tel" name="tel"
style="width: 350px;"/>
</label>
</div>
</div>
<div class="form-group">
<label for="author" class="col-sm-3 control-label">地址</label>
<div class="col-sm-6 input-group" style="padding-left: 0;">
<label>
<input type="text" class="form-control" id="address" name="address"
style="width: 350px;"/>
</label>
</div>
</div>
<div class="form-group">
<label for="cnName" class="col-sm-3 control-label">性别</label>
<div class="col-sm-6 input-group" style="padding-left: 0;">
<select class="form-control" name="gender">
<option value="0" >女</option>
<option value="1" >男</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="submit" class="btn btn-primary" id="saveDoc" data-loading-text="Saving...">保存
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /. PAGE WRAPPER -->
<%@ include file="./include/footer.jsp"%>
<script type="text/javascript">
//基础函数开始
/**
* 基础封装函数
*/
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;
};
/**
* 格式化字符串 第一个参数为格式化模板 format('this is a {0} template!', 'format');
* format('this is a {0.message} template!', { message: 'format'}); 等同于
* format('this is a {message} template!', { message: 'format' });
*/
$.format = function() {
var template = arguments[0],
templateArgs = arguments,
stringify = function(obj) {
if (obj == null) {
return '';
} else if (typeof obj === 'function') {
return obj();
} else if (typeof obj !== 'string') {
return JSON.stringify ? JSON.stringify(obj) : obj;
}
return obj;
};
return template.replace(/\{\w+(\.\w+)*\}/g, function(match) {
var propChains = match.slice(1, -1).split('.');
var index = isNaN(propChains[0]) ? 0 : +propChains.shift();
var arg, prop;
if (index + 1 < templateArgs.length) {
arg = templateArgs[index + 1];
while (prop = propChains.shift()) {
arg = arg[prop] == null ? '' : arg[prop];
}
return stringify(arg);
}
return match;
});
};
/**
* 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, $.trim($this.val()));
}
} else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {
fnSetValue(data, name, $this.val());
} else {
fnSetValue(data, name, $.trim($this.text()));
}
});
return data;
};
/**
* jQuery form 扩展绑定数据
*
*/
$.fn.formSet = function(data, formGroup) {
var els = formGroup ? this.find('[form-group="' + formGroup + '"]') : this.find('[name]');
if (!els || !els.length) {
return this;
}
els.each(function() {
var $this = $(this),
type = $this.attr('type'),
name = $this.attr('name'),
tag = this.tagName.toLowerCase();
var value = _fnObjectGetPropertyChainValue(data, name);
if (tag == 'input') {
if (type == 'checkbox') {
var v = $(this).val();
if (v == 'on' || !v) {
this.checked = value ? 'checked' : '';
} else {
this.checked = $.isArray(value) && value.indexOf(v) > -1 ? 'checked' : ''
}
} else if (type == 'radio') {
this.checked = $this.val() == String(value) ? 'checked' : '';
} else {
$this.val(value);
}
} else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {
$this.val(value);
} else {
$this.html(value);
}
});
return this;
};
//基础函数结束
$(function(){
$('#addDoc').click(function () {
$('#modal_form').modal('show');
});
$('#saveDoc').click(function () {
$(this).button('loading');
var data = $('#modal_form').formGet();
$.ajax({
type: "POST",
url: "/channel/save",
contentType: "application/json",
data: JSON.stringify(data),
success: function (result) {
console.log(result);
if (!result.code) {
location.href = '/'
}else{
alert(result.msg);
}
},
error: function (result) {
alert("出错了,请稍后重试");
}
});
});
});
</script>
</body>
</html>
完整的java代码
Channel实体
package com.test.domain.entity;
import java.util.Date;
import java.util.List;
public class Channel {
private String id;
private String name;// 名字
private int category;// 类别
private String affiliation;// 归属
private String address;// 地址
private List<Contacts> otherContacts;// 其他联系人
private String remarks;// 备注
private int status;// 状态
private Date createTime;// 新增时间
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 int getCategory() {
return category;
}
public void setCategory(int category) {
this.category = category;
}
public String getAffiliation() {
return affiliation;
}
public void setAffiliation(String affiliation) {
this.affiliation = affiliation;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public List<Contacts> getOtherContacts() {
return otherContacts;
}
public void setOtherContacts(List<Contacts> otherContacts) {
this.otherContacts = otherContacts;
}
public String getRemarks() {
return remarks;
}
public void setRemarks(String remarks) {
this.remarks = remarks;
}
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public Date getCreateTime() {
return createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
}
Contacts实体
package com.test.domain.entity;
public class Contacts {
private String relatedId;
private String name;// 姓名
private String tel;// 电话
private String address;// 地址
private int gender;// 性别
public String getRelatedId() {
return relatedId;
}
public void setRelatedId(String relatedId) {
this.relatedId = relatedId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public int getGender() {
return gender;
}
public void setGender(int gender) {
this.gender = gender;
}
}
IndexController实体
package com.test.web.controller;
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.MongoTemplate;
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.Contacts;
import com.test.web.message.response.JSONResult;
/**
* IndexController
*
*
*/
@Controller
public class IndexController {
@Autowired
MongoTemplate mongoTemplate;
DateFormat fmt =new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
@RequestMapping("/")
public String index(Model model) throws IOException {
return "/index";
}
@RequestMapping("/channel/save")
@ResponseBody
public JSONResult saveChannel(@RequestBody Contacts contacts) {
int result=upsertChannel(contacts);
return result>0?JSONResult.success(contacts): JSONResult.error("手机号已存在,保存失败");
}
private int upsertChannel(Contacts contacts) {
System.out.println(contacts.getName());
return 1;
}
}
传输效果如图: