js中添加多项添加

最新推荐文章于 2024-06-14 17:38:31 发布
最新推荐文章于 2024-06-14 17:38:31 发布
阅读量562 收藏
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45535370/article/details/106517749
版权

controller层

@Log("添加巡查项目")
	@GetMapping("/patrol/patroladd")
	String patroladd(Model model) {
		return "/gridmg/patroladd";
	}

	@Log("保存巡查项目")
	@PostMapping("/patrol/patrolsave")
	@ResponseBody
	R patrolsave(PatrolDO user) {
		if (patrolService.savePatrol(user) > 0) {
			return R.ok();
		}
		return R.error();
	}

js层

//var menuTree;
var prefix = "../patrol";
var week =["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];
var month =["1","2","3","4","5","6","7","8","9","10",
	"11","12","13","14","15","16","17","18","19","20",
	"21","22","23","24","25","26","27","28","29","30",
	"31"];
var menuIds;
$(function() {
	//添加验证
	validateRule();
	//获得网格管理员
	getMeshMember();
	//设置巡查粒度和巡查时间
	$('#patroltimediv').css("display","none");
	$('#patroltimetype').change(function(value){
		var v = $('#patroltimetype').val();
		if(v=="每日"){
			//当巡查粒度为每日时隐藏巡查时间
			$("#patroltime").empty();
			$('#patroltimediv').css("display","none");
		}else if(v=="每周"){
			$('#patroltimediv').css("display","block");
			//添加巡查时间
			createPatrolTimeArr(week);
		}else if(v=="每月"){
			$('#patroltimediv').css("display","block");
			createPatrolTimeArr(month);
		}
	})
});
//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交 
$.validator.setDefaults({
	submitHandler : function() {
		save();
	}
});
//获得网格管理员
getMeshMember = function(){
	$.ajax({
		cache : true,
		type : "GET",
		url : "../meshmember/meshmemberlist",
		async : false,
		error : function(request) {},
		success : function(data) {
			//当选择的人员大于等于0时
			if (data.length >= 0) {
				//添加人员
				createMemberArr(data)
			} else {
				parent.layer.msg(data.msg);
			}
		}
	});
}
//可以添加多项巡查时间
createPatrolTimeArr = function(data){
	$("#patroltime").empty();
	for(var i = 0 ; i  < data.length ;i++){
		 $("#patroltime").append($("<option value=\"" + data[i] + "\">" + data[i] + "</option>"));
	}
}
//可以添加多项巡查人员
createMemberArr = function(data){
	for(var i = 0 ; i  < data.length ;i++){
		 $("#member").append($("<option value=\"" + data[i].name + "\">" + data[i].name + "</option>"));
	}
}
function save() {
	var role = $('#signupForm').serialize();
	console.log(role)
	$.ajax({
		cache : true,
		type : "POST",
		url : prefix+"/patrolsave",
		data : role, // 你的formid

		async : false,
		error : function(request) {
			alert("Connection error");
		},
		success : function(data) {
			if (data.code == 0) {
				parent.layer.msg("操作成功");
				parent.reLoad();
				var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引

				parent.layer.close(index);

			} else {
				parent.layer.msg(data.msg);
			}
		}
	});
}
//添加验证
function validateRule() {
	var icon = "<i class='fa fa-times-circle'></i> ";
	$("#signupForm").validate({
		rules : {
			name : {
				required : true
			},
			content : {
				required : true
			},
			patroltime : {
				required : true
			},
			notice : {
				required : true
			}
		},
		messages : {
			name : {
				required : icon + "请输入巡查名称"
			},
			content : {
				required : icon + "请输入巡查内容"
			},
			patroltime : {
				required : icon + "请输入巡查时间"
			},
			notice : {
				required : icon + "请输入注意事项"
			}
		}
	});
}

html层

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">
							<input id="id" name="id" type="hidden" value="1">
							<div class="form-group">
								<label class="col-sm-3 control-label">巡查名称：</label>
								<div class="col-sm-8">
									<input id="name" name="name" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">巡查内容：</label>
								<div class="col-sm-8">
									<textarea id="content" name="content" class="form-control">
									</textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">巡查粒度：</label>
								<div class="col-sm-8">
									<select class="form-control m-b" name="patroltimetype" id="patroltimetype">
                                        <option value="每日">每日</option>
                                        <option value="每周">每周</option>
                                        <option value="每月">每月</option>
                                    </select>
								</div>
							</div>
							<div class="form-group" id="patroltimediv">
								<label class="col-sm-3 control-label">巡查时间：</label>
								<div class="col-sm-8">
									<select id="patroltime" class="selectpicker show-tick form-control" multiple data-live-search="false"  name="patroltime">
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">注意事项：</label>
								<div class="col-sm-8">
									<textarea id="notice" name="notice" class="form-control">
									</textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">绑定网格员：</label>
								<div class="col-sm-8">
									<select id="member" class="selectpicker show-tick form-control" multiple data-live-search="false"  name="member">
									</select>
								</div>
							</div>
							
							<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript" th:src="@{/js/md5.js}"></script>
	<script type="text/javascript"
		th:src="@{/js/appjs/gridmg/patrol/patroladd.js}">
	</script>
</body>
</html>
光阴易逝莫负韶华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
批量添加产品js
hhy62011980的专栏
09-16 1048
<br />做个订单系统时，遇到要批量添加产品，找了js代码，贴出了分享一下：<br /> <br /><body> <br /> <script type="text/javascript"> <br /> var count = 0;<br /> function AddProduct(num){ <br /> count += 1;<br /><br /> //定义载入数据容器<br /> var ProductBox = document.getElementById("ProductB
js代码实现填写简历时“添加项目经历”功能
lidiansheng的专栏
12-06 2647
New Document var index=0; function addedu(){ //alert(index); var edu=document.getElementById("education"); var current = document.getElementById("current_edu"
JS批量添加属性。
weixin_34246551的博客
04-06 369
img {border:1px solid #ccc;cursor:pointer;padding:4px;} <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...
在 JavaScript 中，如何给js对象增加新的属性和值
最新发布
weixin_59191887的博客
06-14 489
点符号用来添加对象的属性，只能用于已知的、固定的属性名。也就是说，属性名必须是一个有效的标识符（不是变量），在编写代码时就已经确定。方括号符号则允许使用动态的属性名，即可以使用变量作为属性名。这意味着可以在运行时根据变量的值来添加或访问对象的属性。
js继续新增
c230704的博客
06-22 263
1 $(document).ready(function () { $(’.close’).hide(); }); 2, 在ajax成功后的跳转页面加个判断 清除所有的input框内容 var ck = $(“input[type=‘checkbox’]”).is(’:checked’);//当这里点击了继续新增 if (ck) { $("#barcode").val(""); $("...
动态添加js,动态添加表格和删除表格,批量添加记录，批量添加
04-29
动态添加js,动态添加表格和删除表格,批量添加记录，批量添加
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...
javascript为下拉列表动态添加数据项
10-25
在现代网页设计中，下拉列表是一种非常常用的表单元素，用于给用户提供多项选择。然而，在某些情况下，下拉列表中的数据项需要根据实际情况动态生成。例如，在网页上创建一个年份选择器时，我们可以使用JavaScript...
通过js为元素添加多项样式,浏览器全兼容写法
10-25
本文介绍了如何通过JavaScript为元素添加多项样式，并确保这种写法在所有主流浏览器中都能正常工作。 知识点一：使用cssText属性 在JavaScript中，可以通过元素的style对象的cssText属性来设置或获取元素的内联样式...
jQuery使用append在html元素后同时添加多项内容的方法
10-24
本文将详细解析如何使用`append()`在HTML元素后同时添加多项内容，以及不同方式创建和添加这些内容。 首先，`append()`方法的基本语法是`$(selector).append(content)`. 其中，`selector`是选择器，用于选取要添加...
js实现以最简单的方式将数组元素添加到对象中的方法
10-18
然而，JavaScript提供了更简洁的方法将数组元素添加到对象中。这里的关键是理解数组的push方法以及apply方法。数组的push方法是用于在数组的末尾添加一个或多个元素，并返回新的数组长度。apply方法则是让一个函数...
vue.js添加待办事项清单表单代码
06-11
vue.js添加待办事项清单表单代码，一款基于vue.js创建待办事项列表表单ui模板。
使用JavaScript实现Web程序中多个文本框的批量选择、批量修改
06-13
我最近几年一直从事B/S信息系统的开发和实施工作，期间总会听到用户抱怨说上了信息系统还不如以前用Excel的时候方便。的确，无论是登录信息还是查找信息，Web程序都要比Excel麻烦很多。其中，不能方便地批量更新一直是用户抱怨较多的地方。最近，我使用纯Javascript实现了一个批量修改文本框中的数据的功能，拖动鼠标即可选择页面上（包括GridView中）多个文本框，然后会自动弹出对话框要求用户输入新值。实现方法对TextBox没有侵入性，也不需要修改现有代码，只要将Javascript代码Copy到页面中即可，如果将其封装到用户控件中就更方便了。详细信息，请见http://11-22-33.blogspot.com/2007/06/javascriptweb.html
js --- 批量创建对象
m0_53149377的博客
11-09 600
批量创建对象
JS每点击一次添加多少条数据
weixin_30933531的博客
12-12 404
　　很久不写文档，平时只写日记，所以对这个有点生疏，如果写的不好别介意。 　　今天闲的蛋疼，于是要写写白天的东西，并且以后也会一直更新(一直写)下去。 　　时间太仓促了，这几个月，今天算最晚的一次凌晨1点，吃不消的路过。 　　进入正题！ 　　这是一个每次点击添加指定数据的插件，基于jQuery封装，调用方法名batchLoading，简单到一键操作，不用每次都来一次了，爽滋滋。 　　实现...
js{},js对象添加属性，方法，删除属性
u014459005的博客
06-10 2376
[img]http://dl2.iteye.com/upload/attachment/0109/4119/6ce5a55d-91c1-3110-8a13-ceb9bb2fbbb6.png[/img] var obj = {name:'张三'};//一个js对象 obj.a = 5;//添加属性 console.log(obj); 添加方法类似， obj.test = funct...
数据插入批量js-sailjs
sjzwenzi的专栏
11-30 882
var mysql = " insert into cpap_log (id,name) values(UUID(),?); "var arr=[];Log.query({sql: sql, values: arr}, function (err, data) { if (err) { sails.log('err: ', err) }});
js动态添加多个元素
qdhwh的博客
01-05 1386
js动态添加多个元素: for(var i = 0; i < memberobj.data.length; i ++ ) { var dom=document.createElement(‘tr’); var tbody = document.getElementsByTagName(‘tbody’)[1]; tbody.appendChild(dom); dom.innerHTML = <tr> <td>${memberobj.data[i].username}</td
JS 添加数组元素（ 4种方法 ）
大剑师兰特的GIS世界
04-25 8902
ush() 和 unshift() 方法会直接修改原数组。 splice() 方法同样会直接修改原数组，但它还可以用来同时删除和插入元素。 concat()方法不会改变原数组，而是返回一个新的数组。
js拼接页面添加单机方法并传多个值
06-09
// 将列表项添加到列表中 list.appendChild(li); }); ``` 在上面的示例中，定义了一个数组 `items`，循环遍历数组中的每一项，并为每个列表项添加点击事件。点击列表项时，会弹出一个提示框，显示点击的是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值