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

业务功能的实现

小编最近做项目遇到一个业务需求，要求用户通过搜索条件进行查询，将查询到的数据进行编辑保存，之后保存按钮成功过需要跳转到之前搜索的页面，小编想到通过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。
如果该代码对你们有帮助的话记得给小编点赞哦！如果存在问题请留言，欢迎你们提出宝贵的意见哈！