几个对应的input输入框批量绑定的实例
需求：
实现多个输入框，批量绑定的时候，可以用 a的input的值中加入所有input循环列表的下标，存储为a的对应的属性的值的list，以及保存b的input值的list，再在后台解析，得到一一对应的input的值
如图，1./**
* 志愿省份限制列表页面
*
* @param map
*/
@RequestMapping("proviceLimitList")
public void proviceLimitList(ModelMap map , WishAreaLimitQueryDTO query) {
SessionUserDTO session = UserContext.user.get();
List
ExamProfessionQueryDTO queryPro = new ExamProfessionQueryDTO();
queryPro.setXueXiaoID(session.getSchoolId());
queryPro.setKaoShiID(query.getKaoShiID());
queryPro.setZhuanYeCJ(1);
queryPro.setWishAreaType(1);
List
List
Map
if(CollectionUtils.isNotEmpty(limitList)){
for(WishAreaLimitDO areaLimit : limitList){
limitMap.put(areaLimit.getZhuanYeID(), areaLimit);
}
}
map.addAttribute("query", query);
map.addAttribute("limitMap", limitMap);
map.addAttribute("examList", examList);
map.addAttribute("list", list);
}
2.页面proviceLimitList.jsp
<%@ page pageEncoding="UTF-8"%>
<%@ include file="/pages/common/tags.jsp"%>
<%@ include file="/pages/common/meta.jsp" %>
<%@ include file="/pages/common/header.jsp" %>
<%@ include file="/pages/menu/leftMenu.jsp" %>
志愿计划详情列表
3.proviceLimitList.js
define(function(require, exports, module) {
var $ = require('jquery');
var validator = require('validator');
var Utils = require('utils');
var Dialog = require('dialog');
var Page = require('page');
var roomList = {
init : function() {
this.bindEvent();//绑定事件
},
bindEvent : function() {
$('#J_batch').click(function(e){
var kaoShiID = $('#kaoShiID').val();
var zhuanYeID = -1;
if (kaoShiID == 0) {
Utils.Notice.alert("请先选择考试！");
}else{
//判断是否选择
if ($(':checkbox[name=a]:checked').length == 0) {
Utils.Notice.alert('请至少选择一个专业!');
}else{
var str = $(':checkbox[name=a]:checked');
var length = $(':checkbox[name=a]:checked').length;
var chestr="";
for (i = 0; i < length; i++ ) {
if(str[i].checked)
{
chestr+=str[i].value+",";
}
}
Dialog.open({
'id':'pro-select',
'title': '计划省份选择',
'url':ctx + '/auth/school/proviceLimit/proviceSelect.htm?zhuanYeID=' + zhuanYeID + '&kaoShiID='+kaoShiID+'&zhuanYeIDs='+chestr,
'size' : 'lg'
});
}
}
});
//全选与反选处理
$('#check_all').click(function () {
if ($(this).prop('checked')) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}
});
//考试名称
$('body').on('change', '#kaoShiID', function() {
var form = $('#search_form');
var kaoShiID = $('#kaoShiID').val();
if (kaoShiID == 1) {
kaoShiID = 0;
}
form.attr("action", "/auth/school/proviceLimit/proviceLimitList.htm");
form.append("");
$('#search_form').submit();
});
$('.proLimit').click(function(e){
e.preventDefault();
var kaoShiID = $('#kaoShiID').val();
var zhuanYeID = $(this).attr('data-id');
var chestr = -1;
if (kaoShiID == 0) {
Utils.Notice.alert("请先选择考试！");
}else{
Dialog.open({
'id':'site-edit',
'title': '计划省份选择',
'url':ctx + '/auth/school/proviceLimit/proviceSelect.htm?zhuanYeID=' + zhuanYeID + '&kaoShiID='+kaoShiID+'&zhuanYeIDs='+chestr,
'size' : 'lg'
});
}
});
}
};
roomList.init();
});
4. proviceSelect.jsp
/**
* 志愿省份限制选择省份页面
*
* @param map
*/
@RequestMapping("proviceSelect")
public void proviceSelect(ModelMap map , ProvinceQueryDTO query) {
if (query.getZhuanYeID() == null || query.getZhuanYeID() == 0 || query.getKaoShiID() == null || query.getKaoShiID() == 0) {
return;
}
// 1:批量设置 2：单个设置
if(query.getZhuanYeID() == -1 && "-1".equals(query.getZhuanYeIDs()) ){
query.setBatchtype(1);
}
SessionUserDTO session = UserContext.user.get();
//省份list转化为map
List
WishAreaLimitQueryDTO limitQuery = new WishAreaLimitQueryDTO();
limitQuery.setKaoShiID(query.getKaoShiID());
limitQuery.setZhuanYeID(query.getZhuanYeID());
limitQuery.setXueXiaoID(session.getSchoolId());
//已存在的限制省份列表
List
Map
if (CollectionUtils.isNotEmpty(limitList)) {
for (WishAreaLimitDO wishLimit:limitList) {
limitMap.put(wishLimit.getAreaID(), wishLimit);
}
}
map.addAttribute("limitMap", limitMap);
map.addAttribute("proList", proList);
map.addAttribute("query", query);
}
5.define(function(require, exports, module) {
var $ = require('jquery');
var validator = require('validator');
var Utils = require('utils');
var Dialog = require('dialog');
var roomList = {
init : function() {
this.bindEvent();//绑定事件
},
bindEvent : function() {
//全选与反选处理
$('#check_all').click(function () {
if ($(this).prop('checked')) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}
});
//提交
$('#J_submit').click(function(e){
var kaoShiID = $('.kaoShiID').val()
//判断是否选择
if ($(':checkbox[name=a]:checked').length == 0) {
$('#idDelete').val(1);
$('#formProSelect').attr('action',ctx + '/auth/school/proviceLimit/doProSelect.htm');
$('#formProSelect:first')[0].submit();
}else{
$('#idDelete').val(2);
var str = $(':checkbox[name=a]:checked');
var length = $(':checkbox[name=a]:checked').length;
var chestr="";
for (i = 0; i < length; i++ ) {
if(str[i].checked)
{
chestr+=str[i].value+",";
}
}
$('#proNum').val(chestr);
$('#formProSelect').attr('action',ctx + '/auth/school/proviceLimit/doProSelect.htm');
$('#formProSelect:first')[0].submit();
}
// window.top.location.reload();
/*setTimeout(function(){
window.top.location.reload();
},700);*/
window.top.location.href = ctx + '/auth/school/proviceLimit/proviceLimitList.htm?kaoShiID='+kaoShiID;
});
}
};
roomList.init();
});
喜欢的朋友可以扫描我的个人公众号，有好东西可以一起分享。免费获取各种学习视频、源码、PPT资料
也可以微信搜索公众号：Java程序员那些事
