ds355020
2017-06-19 13:03 阅读 45

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

I have a table where you can check a checkbox, and another column Quantity #, which contains jQuery UI widgets. If the checkbox is unchecked, then the corresponding cell in the quantity column is hidden.

I can navigate throughout the page using a home button and search functions so if I come back to an originally checked row, then the cell in the _Quantity #_ column is no longer visible even though the checkbox in the row is still checked.

I want to use session storage to be able to keep the Quantity # column and cells visible throughout the session until the page is closed, but only if the row is checked. I was able to use session storage to keep the checkboxes checked, but am having a problem with getting the Quantity # column to remain visible as long as the checkbox is checked for that row.

How can this be achieved?

JavaScript for the session storage for the checkbox:

$(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 for the showing the table column/cell:

$(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 for table:

<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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    drunk_1996 红酒泡绿茶 2017-06-19 14:21

    One way to achieve this is to alter the initial code that checks the session data on page load. When setting the checked property, if that value is true, show the corresponding cell for quantity in that row. Additionally, initialize a variable (e.g. var showQuantityHeader in the example below) and set it to true whenever a checkbox is checked. After iterating over the checkboxes, show that column header if that variable has been 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;
        }
    });
    

    For a demonstration of this, see this phpfiddle.

    Update:

    In comments, you mentioned "is the plain textbox and the "spinner" feature with the up/down arrows is not there anymore". In order to have the spinner ui elements created, the same code is necessary as in the click handlers (i.e. calling $(this).closest("tr").find(".spinner" ).spinner({...})).

    A simple technique for this is to abstract that code for setting up the spinner based on the quantity into a function, e.g.

    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;
            }
          }
        });        
    }
    

    Then call that function when:

    • iterating over checkboxes and setting the checked property based on the session storage value

      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);
      }
      
    • in the click handler:

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

    See a demonstration of this in this updated phpfiddle.

    Update II

    Per your latest comment about persisting the values, I have updated the demonstration phpfiddle.

    When setting the value, it sets the value at a key using the checkbox id:

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

    Then when initializing the page and showing the spinners, it checks for a value in the sessionStorage:

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

    I will leave any other code changes as an exercise to the reader.

    点赞 评论 复制链接分享

相关推荐