Как сохранить состояние открытой строки таблицы с помощью JQuery во время обратной передачи страницы aspx? - PullRequest
Новая
       10

Как сохранить состояние открытой строки таблицы с помощью JQuery во время обратной передачи страницы aspx?

0 голосов
/ 24 октября 2019

Я пытаюсь использовать JQuery для переключения открытия / закрытия трех строк таблицы (<tr>) с помощью следующих сценариев, кода CSS и HTML, которые были на странице веб-формы asp.net (.aspx). Я могу щелкнуть значки «плюс» (+) и «минус» (-), чтобы открыть строки таблицы, но моя проблема в том, что когда я нажимаю кнопку «Отправить», которая вызывает обратную передачу, и что открытая строка таблицы закрывается, а страницавозвращается в исходное состояние. Интересно, есть ли способ сохранить состояние строки открытой таблицы после обратной передачи?

(этот код использует jquery-2.2.4.js и font-awesome 4.7.0)

  1. JQuery-скрипт: 

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

Класс CSS:

.filterTable {margin: auto;border: 0px solid # 808080;} .activator {курсор: указатель;} .activator.open, .activator: hover {background: # f8f3ba;border: 1px dashed # 808080} .activator.open .fa-plus-square-o, .activator .fa-minus-square-o, .activator + .hidden-row {display: none;} .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 - начальная страница:

изображение начального состояния страницы

Изображение b- открытое переключение (когда обратная передача не может поддерживать это состояние)

изображение развернутого состояния строки таблицы, которое не будет поддерживаться после обратной передачи

Ответы [ 2 ]

0 голосов
/ 24 октября 2019

Вы можете использовать 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>

Я еще не тестировал его, но он должен работать нормально. Надеюсь, это поможет.

0 голосов
/ 24 октября 2019

Вы можете использовать функцию javascript, которая будет вызываться после обратной передачи на странице aspx 

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
}
...