需求:表格分为主表与子表,见图。主表项个数不变(题目、排序序号、是否必填、是否多选),子表动态生成(每点击一次新鲜选项内容,生成一组选项名称,排序序号,是否默认选择)在点击“保存”,验证主表项非空,以及子表项非空。
难点:子表变化可能为 “删除一组,增加一组,组数不变数据变化,组数增加同时数据变化”。
解决思路:分为前后台同时解决
前台:在点击“保存”时,判断主表内容是否为空(这很简单),同时判断动态子表是否为空(难点)。
后台:获取动态子表生成的Json串,解析为一个List对象,判断这个对象的 size() 是否为3。如果是,则进行数据库操作;不是,则拦截返回页面。
实现步骤:
前台:
1、给“保存”按钮从 submit类型修改为 button 类型,防止按钮强制提交,而不进行非空方法判断。
2、将表单<form> 标签中的action属性改为“”(空值),通过添加一个 <input type="hidden"> 来保存要发送的表单URL。
3、用Jquery为“保存”按钮设置点击验证事件:主表判断是否每个空格都有值;子表因为动态生成,所以统计子表需要填的空格的数量,在统计子表空格中已经添入数值的数量,用两个数值比较,如果数值一致则提交,不一致则拦截。
$(document)
.ready(
function() {
var optLen;
var selectLen;
var j;
$("#btnSubmit").click(function() {
/*
* 验证question项
*/
var title = $(".control-group > .controls> input[name='title']").val();
//alert("title="+title);
if(title =='' || title ==undefined || title == null){
$(".sku-custombar > span >font").text("有未填的数据,请填写!");
return;
}
var sequence = $(".control-group > .controls> input[name='sequence']").val();
//alert("sequence="+sequence);
if(sequence =='' || sequence ==undefined || sequence == null){
$(".sku-custombar > span >font").text("有未填的数据,请填写!");
return;
}
/*
* 验证option项
*/
optLen = $(".marginright5 > input[type='text']").get().length;
j = 0;
for (var i = 0; i < optLen; i++) {
var obj = $(".marginright5 > input[type='text']").get();
var value = $(obj[j]).val();
if (value != undefined && value != null && value != '') {
j++;
}
}
if (j != optLen) {
$(".sku-custombar > span >font").text("有未填的数据,请填写!");
return;
} else {
var form_action = $('#form_action').val();
$(".sku-custombar > span >font").text("");
//alert(form_action);
$('#inputForm').attr('action',form_action) ;
$("#inputForm").submit();
}
});
}
4、拦截效果图
=================================================================
下面介绍后台拦截判定:
1、在《利用Jquery+JS生成Json串,动态创建添加项》一文中,生成了子表的Json串儿。在后台创建一个解析该字符串儿的 JavaBean。包含两个字段,key值和value值。其中的 value 值是一个List结合,用来包含一组子表中的数据。
public class FeedBackOptJSONBean {
@JSONField(name="key")
<pre name="code" class="java"><pre name="code" class="java"> <span style="font-family: Arial, Helvetica, sans-serif;">private String optionName;</span>
@JSONField(name="value")private List<String> options;}
2、解析Json串儿,判断JSON串儿对象中的 List<String>是否含有4个数值(来自前台子表的 id, name, sequence, selected),如果数量不足4个,返回该页面。如果满足,将数据交给Service层提交给DB。
if(StringUtils.isNotBlank(optJson)){
List<FeedBackOptJSONBean> optionList = JSON.parseArray(optJson, FeedBackOptJSONBean.class);
newOptionList = new ArrayList<FeedbackOptionsBeans>();
for (FeedBackOptJSONBean optJSONBean : optionList) {
if (optJSONBean.getOptions().size()<4) {
String message = "有未填数据,修改失败";
return "redirect:" + adminPath + "/personal/feedback/editfeedbackByquestionId?questionId="
+questionId+"&feedbackId="+feedbackId+"&type="+type+"&message="+message;
}else{
FeedbackOptionsBeans newOption = new FeedbackOptionsBeans();
newOption.setOptionId(optJSONBean.getOptions().get(0));
newOption.setName(optJSONBean.getOptions().get(1));
newOption.setSequence(Integer.parseInt(optJSONBean.getOptions().get(2)));
newOption.setChecked(Integer.parseInt(optJSONBean.getOptions().get(3)));
newOptionList.add(newOption);
}
}
feedbackService.deleteOptionnFeedback(questionId);
for (FeedbackOptionsBeans opt : newOptionList) {
feedbackService.saveOptionWithQuestionId( opt, questionId);
}
}
3、以上完成了后台验证。