如何在 aspx 页面回发期间使用 JQuery 维护切换打开的表行的状态？

Posted 2023-05-08

【中文标题】如何在 aspx 页面回发期间使用 JQuery 维护切换打开的表行的状态？

【英文标题】：How to maintain the state of toggle opened table row using JQuery during an aspx page postback?

【发布时间】：2020-02-20 10:29:41

【问题描述】：

我正在尝试使用 JQuery 来切换打开/关闭三个表行（<tr>'s），其中包含 asp.net 网页表单页面 (.aspx) 中的以下脚本、css 和 html 代码。我可以单击加号 (+) 和减号 (-) 图标来切换打开表行，但我的问题是，当我单击导致回发的“提交”按钮时，打开的表行全部关闭，页面又回到了初始状态。不知道有没有办法可以在回发后保持打开的表行状态？

（此代码使用 jquery-2.2.4.js 和 font-awesome 4.7.0）

jQuery 脚本：

<script type="text/javascript">
    $(function () 
        var $table = $("table");
        $table.find(".activator").click(function () 
            $(this).toggleClass("open");
        );
    );
</script>

CSS 类：

.filterTable 边距：自动；边框：0px 实心#808080; .activator 光标：指针； .activator.open, .activator:hover 背景：#f8f3ba;边框：1px 虚线 #808080 .activator.open .fa-plus-square-o, .activator .fa-minus-square-o, .activator + .hidden-row 显示：无； .activator.open + .hidden-row display: table-row; .activator.open .fa-minus-square-o display: inline-block;

HTML 代码：

<div>
    <table class="filterTable">
      <tbody>
        <tr class="activator">
          <td><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i> Row 1</td>
        </tr>
        <tr class="hidden-row">
          <td>Row 1 content<br /> - row 1</td>
        </tr>
        <tr class="activator">
          <td><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i> Row 2</td>
        </tr>
        <tr class="hidden-row">
          <td>Row 2 content<br /> - row 2</td>
        </tr>
        <tr class="activator">
          <td><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i> Row 3</td>
        </tr>
        <tr class="hidden-row">
          <td>Row 3 content<br /> - row 3</td>
        </tr>
       </tbody>
    </table>
    <div style="height:30px;"></div>
    <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
</div>

图片a - 初始页面：

image of the initial state of page

图片 b - 切换打开（回发时无法维持此状态）

image of the table-row expanded state of page, which will not maintain after postback

【问题讨论】：

HTML代码如下：

您可以使用localStorage 来保留展开行的索引。页面刷新/回发后，您可以读取该值并相应地展开。

谢谢哈伦！您能否提供关于在这种情况下如何使用 localStorage 的简要示例？

【参考方案1】：

您可以使用在aspx页面回发后调用的javascript函数

function  pageLoad()
alert('I will be called each time on postback')
//This function will be called on each postback 
//On click on table row you can set the row state in hidden filed  and after postback you can check the hidden filed value to toggle the rows

【讨论】：

感谢您的帮助 Vishwaveer。我会尝试用你的想法来解决我的问题。我的问题是我在 JQuery 方面非常缺乏经验，所以即使有一个好主意，我仍然不足以实现它。

【参考方案2】：

您可以使用localStorage 来存储扩展行的索引，并在页面刷新后读取该索引并切换类，如下所示：

<script type="text/javascript">

    function storeIndex(index)
       const localStorageArray = JSON.parse(localStorage.getItem('expandedRowIndex'));
       if(!localStorageArray)
          localStorageArray = [];
       

       if(!localStorageArray.includes(index))
          localStorageArray.push(index)
       

       localStorage.setItem('expandedRowIndex',JSON.stringify(localStorageArray))


    

    function removeIndex(index)
       const localStorageArray = JSON.parse(localStorage.getItem('expandedRowIndex'));

       if(localStorageArray)
          localStorageArray = localStorageArray.filter(i => i !== index);
          localStorage.setItem('expandedRowIndex',JSON.stringify(localStorageArray))
       
    

    $(function () 
        var $table = $("table");
        $table.find(".activator").click(function () 
            $(this).toggleClass("open");

            const index = $(this).index('.activator')
            if($(this).hasClass("open"))
               storeIndex(index)
            else
               removeIndex(index)
            
        );

        // Read stored index
        const localStorageArray = JSON.parse(localStorage.getItem('expandedRowIndex'));

        if(localStorageArray)
            localStorageArray.foreach((index) => 
                $table.find('.activator').eq(index).toggleClass("open");
            )
        
    );
</script>

我还没有测试它，但它应该可以正常工作。希望这会有所帮助。

【讨论】：

嗨哈伦，谢谢你的帮助。我测试了你的代码，它成功了！但是有一件事不符合我的期望。这可以为一行维护“打开的”表行。如果我在回发时单击以打开两行或全部三行，则它仅保留最近打开的行。你有什么想法让所有“打开”的行在回发后保持打开状态吗？

嗨哈伦，你真好，谢谢！我复制了您的代码并在 Internet Explorer 和 Chrome 浏览器中进行了测试。新代码有问题。首先它在 IE 中不起作用。当您单击该图标时，它没有打开隐藏的行。其次，在 Chrome 浏览器中，您可以单击打开隐藏的行，但是当您单击提交按钮进行回发时，打开的行全部关闭，页面恢复到初始状态。