添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
骑白马的毛衣  ·  Scroll to top upon ...·  57 分钟前    · 
忧郁的皮带  ·  给WordPress的comment_for ...·  15 小时前    · 
冷冷的麦片  ·  No submit button | ...·  15 小时前    · 
勤奋的铁链  ·  第二节 ...·  20 小时前    · 
不羁的南瓜  ·  httpClient ...·  5 天前    · 
憨厚的薯片  ·  Hi Folks I have ...·  2 月前    · 
不敢表白的钥匙扣  ·  列表渲染 | Vue.js·  9 月前    · 
听话的核桃  ·  js如何修改html的title标题·  10 月前    · 

layui的form中,选中多个checkbox复选框(name都相同)时,data.field中只会有最后一个选中的checkbox的值!
jsp代码:

<div class="layui-form-item" pane>
	    <label class="layui-form-label">驳回后不再上传</label>
        <div class="layui-input-block">
            <c:forEach items="${openUploadArr }" var="v" varStatus="status">
                <c:set var="currBankTypeEnum" value="${BankType.getEnumByValue(v) }"/>
                <input type="checkbox" name="noRepeatUploadBanks" value="${currBankTypeEnum.value }" title="${currBankTypeEnum.desc }" <c:forEach items="${noRepeatUploadBankArr }" var="nrub"><c:if test="${nrub eq currBankTypeEnum.value }">checked="checked"</c:if></c:forEach>>
            </c:forEach>

js代码(控制台输出data.field):

layui.use('form', function(){
	    var form = layui.form;
	    form.on('submit(submit)', function(data){
 		    console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: "value"}
 		    ......

控制台输出:
在这里插入图片描述

方式一(不推荐)

在提交form前先遍历所有选中的checkbox,将他们的value拼接成字符串,写入到data.field中,再传到后台用字符串接收,后台再切割成数组。
前台:

layui.use('form', function(){
	    var form = layui.form;
	    form.on('submit(submit)', function(data){
 		    //console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: "value"}
 		    //获取checkbox数据,拼接成字符串!!!!!!
 		    var noRepeatUploadBanksStr = "";
 		    var r = document.getElementsByName("noRepeatUploadBanks");
 		    for (var i = 0; i < r.length; i++) {
	 		    if (r[i].checked) {
	 		    	noRepeatUploadBanksStr+= "," + r[i].value;
 		    if (noRepeatUploadBanksStr.length > 0) {
 		        noRepeatUploadBanksStr = noRepeatUploadBanksStr.substring(1);
 		    data.field.noRepeatUploadBanksStr = noRepeatUploadBanksStr;
		    var url="${pageContext.request.contextPath}/admin/doEditSysSetting";
		    layer.confirm('您确认保存设置吗', {icon: 3, title:'提示'}, function(index){
		  		layer.close(index);//关闭询问弹框
	          	$.ajax({
	          		type: "POST", 
	        	  	url: url, 
	        	  	data: data.field,
	        	  	dataType:"json",
	        	  	success: function(returnData){
	        		  	if(returnData.code==1){
	        		  		//修改隐藏input[oldCrontabStatusInt]的值
	        		  		var new_oldCrontabStatusInt = returnData.obj;
	        		  		$('input[name=oldCrontabStatusInt]').val(new_oldCrontabStatusInt);
	        			  	layer.msg('保存成功', {
	            				icon: 1,
	            				time: 20000, //20s后自动关闭
	            			    btn: ['确定']
	            		  	}, function(){
	            				parent.layer.closeAll();
	                  	}else{
	                      	layer.msg(returnData.msg, {icon: 2});
		    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
@RequestMapping("/doEditSysSetting")
@ResponseBody
public ResultInfo doEditSysSetting(HttpServletRequest request,int oldCrontabStatusInt, String noRepeatUploadBanksStr){

方式二(推荐)

在提交form前先遍历所有选中的checkbox,过将value组装成js数组,写入到data.field中,再传到后台直接用数组接收。值得注意的是:ajax提交数组到后台,需要设置参数traditional: true,该参数表示是否使用传统的方式浅层序列化。
前台:

layui.use('form', function(){
	    var form = layui.form;
	    form.on('submit(submit)', function(data){
 		    //console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: "value"}
 		    //获取checkbox数据,组装成数组!!!!!!
 		    var noRepeatUploadBanks =[]; 
			$('input[name="noRepeatUploadBanks"]:checked').each(function(index, domEle){ 
				noRepeatUploadBanks.push($(this).val()); 
			data.field.noRepeatUploadBanks = noRepeatUploadBanks;
		    var url="${pageContext.request.contextPath}/admin/doEditSysSetting";
		    layer.confirm('您确认保存设置吗', {icon: 3, title:'提示'}, function(index){
		  		layer.close(index);//关闭询问弹框
	          	$.ajax({
	          		type: "POST", 
	        	  	url: url, 
	        	  	data: data.field,
	        	  	traditional: true, //是否使用传统的方式浅层序列化,若有数组参数或对象参数需要设置true!!!!!!
	        	  	dataType:"json",
	        	  	success: function(returnData){
	        		  	if(returnData.code==1){
	        		  		//修改隐藏input[oldCrontabStatusInt]的值
	        		  		var new_oldCrontabStatusInt = returnData.obj;
	        		  		$('input[name=oldCrontabStatusInt]').val(new_oldCrontabStatusInt);
	        			  	layer.msg('保存成功', {
	            				icon: 1,
	            				time: 20000, //20s后自动关闭
	            			    btn: ['确定']
	            		  	}, function(){
	            				parent.layer.closeAll();
	                  	}else{
	                      	layer.msg(returnData.msg, {icon: 2});
		    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
@RequestMapping("/doEditSysSetting")
@ResponseBody
public ResultInfo doEditSysSetting(HttpServletRequest request,int oldCrontabStatusInt, String[] noRepeatUploadBanks){

1.layui提交checkbox复选框多个值的时候只会提交最后一个的值,故需要手动处理,要么拼接成字符串传到后台用字符串接收后再切割成数组,要么组装成js数组传到后台直接用数组接收;
2.ajax提交数组到后台,需要设置参数traditional: true。(layui提交form表单就是使用的ajax方式)

<div class=layui-form-item> <label class=layui-form-label>品种</label> <div class=layui-input-inline> {foreach $quotation_type as $key=>$val} <input name=quotation_type lay-skin=primary value={$key} title={$val} type=chec 后来我发现在checkbox添加lay-filter="demo-checkbox-filter"然后每次选中触发方法时获取多选框所有的确是没办法获取到,并不是网上的方法不对,最后在监听提交按钮的方法上获取多选框的再赋给表单,最后提交后台才拿到。以上是我项目中用到的实例 ,当我提交后台只能拿到最后选中的一个,网上找了很多方法,但是我测试时都是无效的, form表单元素包括:text 文本输入框,password密码输入框,checkbox复选框,radio单选框,file 文件域,submit表单提交action指向的文件,reset表单清空,image图片提交按钮,button按钮,hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块   模块可以是layui已经存在... //添加按钮监听 let on = table.on('toolbar(test)', function (obj) { var checkStatus = table.checkStatus(obj.config.id); switch (obj.event) { case 'addData': layer.open({ title: '添加用户', type: 2, 最近在准备找工作的事项,但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE,但是VUE还是存在一定的学习成本,所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手,后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章,作为学习记录使用。 表单模块文档 - layui.form 我们通常会在最常用的模块上耗费更多的精力,用尽可能简单的方式诠释 layui 所带来的便捷性。显而易见,form 是我们非常看重的一块。于是它试图用一贯极简的 1.引入layui 引入文件的具体路径需要根据实际项目来。 <link href="~/Content/plugins/layui-v2.4.3/layui/css/layui.css" rel="stylesheet" /> <script src="~/Content/plugins/layui-v2.4.3/layui/layui.js"></script> 2. 页面功能分析 页面结构如上图 layui页面 因为页面中的数据使用layuiform模块获取formData对象无法直接将多选框的加入请求头,所以先将获取的多选按钮的转为数组,然后使用formData.classId=arr_box;方法,将数组追加到formData中,后台获取。String path = request.getContextPath();String basePath = request.get... ###要求是做一个新增试题的页面,使用的layui框架。效果图如下,可以根据题目类型的选择自动变换答案的单选框和复选框,并且可以添加删除选项的同时也新增或删除答案按钮。最小两个选项。 在实现的过程中遇到的问题: 就是复选框提交后台接收到了最后一个,最后发现是checkBox的name写的有问题,应该是name=answer[],这样提交后台就是一个数组。 <div class="layui-form-item" pane=""> <label class="lay 我是想将使用了formSelect插件的select框,将多选的数据通过数据表格重载(where)的方式发送到后端,绑定到接收对象内的一个属性上。但是总是出现了这样或者那样的问题。 controller层接受数据的代码 public void f1(HttpServletRequest request, HttpServletResponse response, Fo... form表单元素包括:text 文本输入框,password密码输入框,checkbox复选框,radio单选框,file 文件域,submit表单提交action指向的文件,reset表单清空,image图片提交按钮,button按钮,hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块 模块可以是layui已经存在的模块,也可以通过layui.define([mods], callback) 来自己自定义模块。 如果想要使. 1.前言: layui用了几年,这个框架十分适合我们后台人员开发。简单易用,用的较多的模块肯定是table模块和form模块了。但是在一个开发团队中,不同的人开发水平的差异,如果没有调用统一的公共方法,那就会造成很多样式的不同和公共的bug出现到不同的页面 从而出现耗费过多的精力修改bug。所以我们需要做的是统一样式和方法的调用,将其二次封装以便于开发人员的调用。另一方面也能减少代码的冗余量。 2. layui-form的封装 2.1.针对select组件的封装 2.1.1 结构 一般不同的是sele