2019.2.28随笔——————js、jsp相关

本文链接：https://blog.csdn.net/weixin_42324556/article/details/88061123

style=" padding-left: 15rem; padding-top: 1rem;"
rem:是适应当前分辨率
此语句为向左移动

onfocus：当Input获取焦点的时候执行它里面的代码;onblur:当从焦点移开的时候触发事件。

业务列表：

			<div class="trasnfer-select">
				<div class="select-item">
					<select multiple="multiple" id="transfer_select1"
						class="search_name">

					</select>
				</div>
				<div class="btn-item">
					<p>
						<span id="transfer_add">></span>
					</p>
					<p>
						<span id="transfer_remove"><</span>
					</p>
					<p>
						<span id="transfer_add_all">>></span>
					</p>
					<p>
						<span id="transfer_remove_all"><<</span>
					</p>
				</div>
				<div class="select-item">
					<select multiple="multiple" id="transfer_select2"
						class="search_name">

					</select>
				</div>
			</div>`

此段jsp代码实现的功能是两个列表的左右移动，具体实现功能在js里面进行操作
点击进行左右移动
js代码：

//移到右边
	$(document).on('click', '#transfer_add', function() {
		if($("#transfer_select1 option:selected").length<=0) {
			alert("请选择移动的选项")
		} else {
			$('#transfer_select1 option:selected').appendTo('#transfer_select2');
		}
	});
	//移到左边
	$(document).on('click', '#transfer_remove', function() {
		if($("#transfer_select2 option:selected").length<=0) {
			alert("请选择移动的选项")
		} else {
			$('#transfer_select2 option:selected').appendTo('#transfer_select1');
		}
	});
	//双击选项
	$(document).on('dblclick', '#transfer_select1', function() {
		$("option:selected", this).appendTo('#transfer_select2');
	});
	//双击选项
	$(document).on('dblclick', '#transfer_select2', function() {
		$("option:selected", this).appendTo('#transfer_select1');
	});
	//全部移到右边
	$(document).on('click', '#transfer_add_all', function() {
		$('#transfer_select1 option').appendTo('#transfer_select2');
	});
	//全部移到左边
	$(document).on('click', '#transfer_remove_all', function() {
		$('#transfer_select2 option').appendTo('#transfer_select1');
	});

$(“li[data-src=’/XXXX/jsp/serviceManage/selectAssessPlan.jsp’]”).click(); 进行页面跳转；
selected 在标签里面是默认选中的意思
$('#pageAdd').off().on('click',function() { if($("#risk_name").val()==''){ alert("请输入评估计划"); return; }

两者没有太大的区别，但是上面不能使用document这种写法，如果使用当切换页面之后就会执行两次请求；而下面的必须使用document，如果不使用就会出现切换页面之后执行多次请求；暂时不知道原因，如有了解望告知，感谢。

//移到右边
	$(document).on('click', '#transfer_add', function() {
		if($("#transfer_select1 option:selected").length<=0) {
			alert("请选择移动的选项")
		} else {
			$('#transfer_select1 option:selected').appendTo('#transfer_select2');
		}
	});

7.JSON.stringify（）作用是把一javascript对象或者数组转化成字符串；
8.实现模糊查询后下拉框点击进行模糊查询

<div class="dialog-line">
					<div class="dialog-line-title">评估计划：</div>
					<div class="dialog-line-content">
						<input style="width: 200px" type="text" class="search_name" id="plan_name" name="plan_name" value="" data-plan_code="">
						<ul class="experience-cve_name-ul" id="add_plan_list" style="width:300px;left:auto;margin-left: 5px;">
					
						</ul>
							<font color="red">* 输入内容模糊检索</font>
					</div>
				</div>

根据"<“input”>"标签的Id进行查询然后再根据下面ul的id进行下拉展示；
9.$(".app-list-table").mCustomScrollbar({ advanced: { updateOnContentResize: true } , axis : "y",callbacks:{ whileScrolling : function() { var _top1 = Math.abs($("#tableWrite").parents().css("top").replace("px", "")); $("#tableWrite").find("thead").css("transform", 'translateY(' + _top1 + 'px)'); } }});
在js里面增加滚动条