如何根据存储在本地/会话存储中的值显示表格列中的单元格？

Question

我有一个表格，您可以在其中选中一个复选框，以及另一列 Quantity #，其中包含 jQuery UI 小部件。如果未选中该复选框，则数量列中的相应单元格将被隐藏。

我可以使用主页按钮和搜索功能在整个页面中导航，因此如果我回到最初选中的行，即使行中的复选框，_Quantity #_ 列中的单元格也不再可见仍在检查中。

我希望使用会话存储能够在整个会话期间保持 Quantity # 列和单元格可见，直到页面关闭，但前提是选中该行。 strong> 我能够使用会话存储来保持复选框处于选中状态，但是只要选中该行的复选框，就无法让 Quantity # 列保持可见。

如何做到这一点？

用于复选框会话存储的 JavaScript：

$(function(){
    $(':checkbox').each(function() {
        // Iterate over the checkboxes and set their "check" values based on the session data
        var $el = $(this);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('input:checkbox').on('change', function() {
        // save the individual checkbox in the session inside the `change` event, 
        // using the checkbox "id" attribute
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});

用于显示表格列/单元格的 JavaScript：

$(function () {
    $(".check").change(function(){
    $(this).closest('tr').find('td.quantity_num').toggle(this.checked);
    console.log($('input.check').is(':checked'));
    var quantity = $(this).closest('tr').find('td.quantity').data('quantity');
        console.log(quantity);

  if($('input.check').is(':checked'))
    $(this).closest('table').find('th.num').toggle(true);
    else
    $(this).closest('table').find('th.num').toggle(false);



    $(this).closest("tr").find(".spinner" ).spinner({
      spin: function( event, ui ) {
        if ( ui.value > quantity ) {
          $( this ).spinner( "value", quantity );
          return false;
        } else if ( ui.value <= 1 ) {
          $( this ).spinner( "value", 1 );
          return false;
        }

        var test = ui.value;
        sessionStorage.setItem("test", JSON.stringify(test));
        var testtrue = sessionStorage.getItem("test");
        console.log(JSON.parse(testtrue));

      }
    });
  });
  });

表格的 HTML/PHP：

<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Loc</th>
            <th class="merchRow">Report Code</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Special ID</th>
            <th class="merchRow">Description</th>
            <th class="merchRow">Quantity</th>
            <th class="sorttable_nosort">Unit</th>
            <th style="display: none;" class="num">Quantity #</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($query) as $row) {?>

        <tr>
            <td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
            <td class="loc ui-widget-content"><input type="hidden"><?php echo $row['Loc'];?></td>
            <td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
            <td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
            <td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
            <td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
            <td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
            <td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
            <td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

Answer 1

实现此目的的一种方法是更改​​在页面加载时检查会话数据的初始代码。设置 checked 属性时，如果该值为 true，则显示该行中数量的相应单元格。此外，初始化一个变量（例如下面示例中的var showQuantityHeader）并在选中复选框时将其设置为true。遍历复选框后，如果该变量为真，则显示该列标题。

var showQuantityHeader = false;
$(':checkbox').each(function() {
    // Iterate over the checkboxes and set their "check" values based on the session data
    var $el = $(this);
    //console.log('element id: ',$el.prop('id'),' sessionStorage[id]: ',sessionStorage[$el.prop('id')]);
    $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    if ($el.prop('checked')) {          
        //show the quantity cell in the column under header with class num
        $el.closest('tr').find('td.quantity_num').toggle(this.checked);
        showQuantityHeader = true;
    }
});

有关这方面的演示，请参阅this phpfiddle。

更新：

在 cmets 中，您提到“是纯文本框，而带有向上/向下箭头的“微调器”功能不再存在”。为了创建 spinner ui 元素，需要与单击处理程序中相同的代码（即调用 $(this).closest("tr").find(".spinner" ).spinner({...})）。

为此，一种简单的技术是将用于根据数量设置微调器的代码抽象为函数，例如

function setupSpinner(checkbox) {
    var quantity = $(checkbox).closest('tr').find('td.quantity').data('quantity');
    $(checkbox).closest("tr").find(".spinner" ).spinner({
      spin: function( event, ui ) {
        if ( ui.value > quantity ) {
          $( this ).spinner( "value", quantity );
          return false;
        } else if ( ui.value <= 1 ) {
          $( this ).spinner( "value", 1 );
          return false;
        }
      }
    });        
}

然后在以下情况下调用该函数：

• 遍历复选框并根据会话存储值设置 checked 属性

  if ($el.prop('checked')) {          
      //show the quantity cell in the column under header with class num
      $el.closest('tr').find('td.quantity_num').toggle(this.checked);
      showQuantityHeader = true;
      setupSpinner(this);
  }
  

• 在点击处理程序中：

  $(".check").change(function(){
      $(this).closest('tr').find('td.quantity_num').toggle(this.checked);
      setupSpinner(this);
  

在this updated phpfiddle 中查看演示。

更新二

根据您关于持久化值的最新评论，我已更新 demonstration phpfiddle。

设置值时，它使用复选框 id 设置键的值：

var test = ui.value;
sessionStorage.setItem('value_'+$(checkbox).prop('id'), JSON.stringify(test));

然后在初始化页面并显示微调器时，它会检查 sessionStorage 中的值：

var quantity = sessionStorage['value_'+$el.prop('id')];
if (quantity) {
    $el.closest("tr").find(".spinner" ).spinner( "value", quantity );
}

我会将任何其他代码更改留给读者作为练习。