按条件搜索之后编辑保存后跳转到之前搜索的状态页面
程序员文章站
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。
如果该代码对你们有帮助的话记得给小编点赞哦!如果存在问题请留言,欢迎你们提出宝贵的意见哈!