Question

我在下面编写了折叠/展开代码的代码。它工作正常。最后，如果我单击“保存”按钮，我将在asp.net中重新加载页面。所以部分再次默认为Colleapse。我需要他们回来扩展。我怎样才能做到这一点？

$(function() {
       $('tr.subCategory')
           .css("cursor", "pointer")
           .attr("title", "Click to expand/collapse")
           .click(function() {
       $(this).siblings('.RegText-' + this.id).toggle();
           });
           $('tr[@class^=RegText-]').hide().children('td');
   })

Answer 1

您可以使用以下方式保存状态：

网址哈希：mysite.com＃a = 1，b = 2 ...或者您想记录您的状态。
缓存
Window.name

重新加载时，检查记录的状态，解析并在代码中重新执行。

修改

当您执行UI中更改的内容时，您需要在某种代码中的某处（即面板A打开）记录此操作。它可以是字符串中的名称，值对（ID，STATE | ID，STATE..etc）或您选择的任何内容。然后，您需要编写一个机制来获取此“已保存状态”信息，并将UI重新初始化回原来的位置。

一旦你完成了表示和重新初始化状态的方法，你必须考虑如何保存和检索它。

如果它不是太大，你可以保存它是一个cookie。页面加载时，检查cookie并解析数据并运行重新初始化例程以恢复UI。

隐藏数据的另一个持久位置是window.name，它可以容纳最多2mb的字符串。与cookie相同的交易。

第三种方法是将状态信息存储在URL中：document.location = document.location + "#" + stateData。然后，您可以解析URL中的内容以获取状态数据。

“url / hash”方法正在成为首选技术，因为它允许书签，并且是一种新规范，允许搜索机器人轻松读取基于ajax的网站。

请参阅：http://code.google.com/intl/sv-SE/web/ajaxcrawling/docs/specification.html

Answer 2

如果你正在使用更新面板，你可以告诉我们jQuery的$（document）.ready仅在初始加载时调用，并且每次回发都会调用ASP.NET AJAX的pageLoad（）。您可以在$（document）.ready中折叠您的部分，因此它最初是隐藏的，然后在pageLoad（）中分配单击处理程序，以便用户在保存后仍然可以再次折叠它。

$(document).ready(function() {{
    $('tr[@class^=RegText-]').hide().children('td'); 
}});

function pageLoad() {
    $('tr.subCategory').click(function() {                                  
        $(this).siblings('.RegText-' + this.id).toggle();
    });        
}

Answer 3

您可以使用隐藏的div字段，并修改您的js以将隐藏文本设置为单击时展开字段的ID。您的函数可以检查隐藏文本的值，并显示与隐藏文本ID匹配的字段。

在您的页面中

：

<div class="hidden" style="display:none;" />

你的.js中的

$(function() {
       $('tr.subCategory')
           .css("cursor", "pointer")
           .attr("title", "Click to expand/collapse")
           .click(function() {
       $(this).siblings('.RegText-' + this.id).toggle();
               $('.hidden').text(this.id); // set the hidden field to the id shown
           });
           $('tr[@class^=RegText-]').hide().children('td');
           $('#' + $('.hidden').text() + ''').show(); // show the id set in hidden field
   })

页面重新加载后，Jquery切换应该展开

3 个答案: