(function() { window.TaskSearchHashQuery = function () { HashQuery.constructor.call(this); this.iterationId = ''; this.assignedUserId = ''; this.status = ''; this.keyword = ''; }; TaskSearchHashQuery.constructor = TaskSearchHashQuery; TaskSearchHashQuery.prototype = new HashQuery(); })();
第二步，在查询页面调用HashQuery.parseFromLocation() 和 HashQuery.updateLocation()方法即可。下面的代码是我们完整的查询页面：
(function() { var urls = { list: "/app/task/list" }; var hashQuery = null; var pager = null; $(document).ready(function () { hashQuery = new TaskSearchHashQuery(); hashQuery.parseFromLocation();//在这里调用的哦，从location反序列化object updateFormByHashQuery(); $("#btnSearch").click(function() { updateHashQueryByForm(); hashQuery.updateLocation();//在这里调用的哦，将查询条件序列化之后更新到location.hash $("#lblCount").html("加载中..."); pager.reload(); page.hideSearch(); }); pager = new ListPager("#listTasks", urls.list); pager.getPostData = function(index) { return "pageIndex=" + index + "&pageSize=" + "&projectId=" + page.projectId + "&iterationId=" + hashQuery.iterationId + "&assignedUserId=" + hashQuery.assignedUserId + "&status=" + hashQuery.status + "&keyword=" + hashQuery.keyword; }; pager.onLoaded = function() { $("#lblCount").html("共 " + $("#hfPagerTotalCount").val() + " 个任务"); $("#hfPagerTotalCount").remove(); }; pager.init(); }); function updateHashQueryByForm() { hashQuery.iterationId = $("#ddlIterations").val(); hashQuery.assignedUserId = $("#ddlUsers").val(); hashQuery.status = $("#ddlStatuses").val(); hashQuery.keyword = $("#txtKeyword").val(); }; function updateFormByHashQuery() { $("#ddlIterations").val(hashQuery.iterationId); $("#ddlUsers").val(hashQuery.assignedUserId); $("#ddlStatuses").val(hashQuery.status); $("#txtKeyword").val(hashQuery.keyword); }; })();
总结
这就是我们项目中使用location.hash来保存页面状态的全部知识了。不知道大家的WEB项目中是如何处理这样的需求的呢？
以上内容是小编给大家介绍的location.hash保存页面状态的技巧，希望对大家有所帮助！
您可能感兴趣的文章: