欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

按条件搜索之后编辑保存后跳转到之前搜索的状态页面

程序员文章站 2022-06-09 16:07:58
...

业务功能的实现

小编最近做项目遇到一个业务需求,要求用户通过搜索条件进行查询,将查询到的数据进行编辑保存,之后保存按钮成功过需要跳转到之前搜索的页面,小编想到通过cookie的形式进行实现。

实现思路

  • 当用户点击查询按钮时,将form表单的搜索条件进行序列化后存在cookie当中
  • 用户对数据进行编辑保存后,将cookie中的数据进行遍历,再填充到搜索框当中,并发起查询的请求

代码实现

html代码

/** 查询按钮 */
<form:form id="searchForm" modelAttribute="purchaseOrder" class="breadcrumb form-search">
	<li><label>采购单号:</label>
		<form:input path="no" htmlEscape="false" name="no" maxlength="32" class="input-medium no"/>
	</li>
	<li><label>项目编号:</label>
		<form:input path="projectNo" htmlEscape="false" name="projectNo" maxlength="32" class="input-medium projectNo"/>
	</li>
	<li>
		<label>所属部门:</label>
		<form:select path="purUser.office.id" class="input-xlarge required officeId" name="officeId">
			<form:option value="" label="全部"/>
				<c:forEach items="${officeList}" var="office">
					<form:option value="${office.id }" label="${office.name }"/>
				</c:forEach>
		</form:select>
	</li>
	<li class="btns">
		<input id="btnSubmit" class="btn btn-primary" type="submit" onclick="submitFind()" value="查询"/>
	</li>
</form:form>

cookie代码
cookie的存值,取值,以及销毁cookie,在这个业务功能都是需要使用到的

//cookie中存值:
function setCookie (name, value) {
    if (value) {
        var Days = 365
        var exp = new Date()
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
        document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString();
    }
}
//cookie取值:
function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}
//清除指定cookie值:
function delCookie (name) {
    var exp = new Date()
    exp.setTime(exp.getTime() - 10000)
    var cval = getCookie(name)
    if (cval && cval != null) {
        document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()+'path=/';
    }
}

js代码

/** 查询点击事件,将form表单序列化之后,编码存入cookie当中 */
function submitFind(){
	var arrayObject = encodeURI($("#searchForm").serialize());
            setCookie("name", arrayObject);
            $("#searchForm").attr('action', '${ctx}/purchase/purchaseOrder?purType=0');
}

$(document).ready(function() { 
	/** 页面加载完,并且${doc}=true表示编辑保存的时候执行 */  
	if(${doc}){
   		var arrayObject = decodeURI(getCookie("name"));
        var list = arrayObject.split("&");
			if(list.length>0) {
			/** 循环form表单的select和input,遍历cookie中的值,并将值重新赋值给搜索框 */
             	$("#searchForm select,input").each(function () {
                 for (var i = 0; i < list.length; i++) {
                     if (list[i].indexOf($(this).attr("name")) >= 0) {
                         $(this).val(list[i].replace($(this).attr("name") + "=", ""));
                         $(this).prev().find(".select2-chosen").html($(this).find("option:selected").text());
                         break;
                     }
                 }
             });
         }
         /** 赋值成功后再次请求后台按条件查询 */
         	$("#searchForm").attr('action', '${ctx}/purchase/purchaseOrder?purType=0');
         	$("#searchForm").submit();
         }
        	var deCookie = '${deCookie}';
        	/** 销毁cookie */
         	if(deCookie == '0'){
             delCookie("name")
         }
});

好了,代码主要是在前端进行实现的,后台只是传送一些状态来标识何时对form表单重新提交,以及何时销毁cookie。
如果该代码对你们有帮助的话记得给小编点赞哦!如果存在问题请留言,欢迎你们提出宝贵的意见哈!