javascript - 如何根据本地/ session 存储中存储的值显示表列中的单元格？

Question

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

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

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

如何实现这一目标？

用于复选框 session 存储的 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

实现此目的的一种方法是更改​​检查页面加载时 session 数据的初始代码。设置 checked 属性时，如果该值为 true，则显示该行中数量的相应单元格。此外，初始化一个变量(例如下面示例中的 var showQuantityHeader)，并在选中复选框时将其设置为 true。遍历复选框后，如果该变量为 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 .

更新:

在评论中，您提到“是纯文本框，带有向上/向下箭头的“旋转器”功能不再存在”。为了创建 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;
        }
      }
    });        
}

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

• 迭代复选框并根据 session 存储值设置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 );
}

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