Bootstrap Switch显示/隐藏表列-初始配置和值存储

Question

所以我有一张桌子，我需要用它来排序和过滤（表单提交），以及显示和隐藏列。 我有一个简单的复选框，除了切换列外什么也不做。 我已经能够使它正常工作，但现在的问题是我需要在整个页面生命周期中保存状态-不会发生。

基本的显示/隐藏列在表格本身中，紧靠表格之后：

@section Scripts {
<script type="text/javascript">

  $('input[name="columnControl"]').on('switchChange.bootstrapSwitch', function (event, state) {
    if (state) {
      $("th.status").removeClass("columnHide");
      $("td.status").removeClass("columnHide");
      $("th.information").addClass("columnHide");
      $("td.information").addClass("columnHide");
      $("td#p1").attr('colspan', 4);
      $("td#p2").attr('colspan', 6);
      localStorage.setItem('columnControl', 'true');
    } else {
      $("th.status").addClass("columnHide");
      $("td.status").addClass("columnHide");
      $("th.information").removeClass("columnHide");
      $("td.information").removeClass("columnHide");
      $("td#p1").attr('colspan', 2);
      $("td#p2").attr('colspan', 3);
      localStorage.setItem('columnControl', 'false');
    }
  });
</script>
}

因此请注意：上面的方法至少在显示和隐藏列方面起作用。

现在，到目前为止，我发现在页面周期内保存信息的最佳方法是通过localstorage设置，如上面的代码所示。 这对于其他页面上的选项卡非常有用，但是我无法使它适用于我的表和引导程序开关。

特别：

• 在页面加载时，我希望开关以localstorage设置的状态为条件。 如果为true或false，则开关需要处于适当的设置，并且需要为列设置适当的类。 如果没有本地存储内容（未存储True或False），则需要将开关设置为ON（真）并设置某些类（默认情况）。
• 在表单提交（GET，而不是POST）上，我需要使开关和所有应用的类保持原样，并且不还原为默认情况。
• 如果用户离开该页面并返回到该页面，则开关和类应保持其最后状态，并且不还原为默认状态。

我能提出的最好的办法是：

@section Scripts {
<script type="text/javascript">
$( document ).ready(function() {
  var columnState = localStorage.getItem('columnControl'); //grab the localstorage value, if any
  if (columnState) { //does the localstorage value even exist?
    $('input[name="columnControl"]').bootstrapSwitch('setState', columnState); //if localstorage exists, set bootstrap switch state based off of localstorage value
    if (columnState == 'true') { //if localstorage value == true
      $("th.status").removeClass("columnHide");
      $("td.status").removeClass("columnHide");
      $("th.information").addClass("columnHide");
      $("td.information").addClass("columnHide");
      $("td#p1").attr('colspan', 4); //set tfoot colspans
      $("td#p2").attr('colspan', 6);
    } else { //if localstorage value == false
      $("th.status").addClass("columnHide");
      $("td.status").addClass("columnHide");
      $("th.information").removeClass("columnHide");
      $("td.information").removeClass("columnHide");
      $("td#p1").attr('colspan', 2); //set tfoot colspans
      $("td#p2").attr('colspan', 3);
    }
  } else { //if localstorage value doesn't exist, set default values
    $('input[name="columnControl"]').bootstrapSwitch('setState', true);
    $("th.information").addClass("columnHide");
    $("td.information").addClass("columnHide");
  }
});

  $('input[name="columnControl"]').on('switchChange.bootstrapSwitch', function (event, state) {
    … first script, above …
  });
</script>
}

实际的Bootstrap Switch是通过以下方式由全局JS文件初始化的：

$("input[type=checkbox]").bootstrapSwitch(); // checkbox toggle

出现在网页顶部。

我有两组列， information和status ，它们之间占80％。 三列没有隐藏或取消隐藏的标志，因为它们总是要显示。

Answer 1

要测试本地存储是否存在，请使用：

columnState === null

您只需要在定义默认值后触发switchChange事件

完整示例：

@section Scripts {
<script type="text/javascript">
$( document ).ready(function() {

  $('input[name="columnControl"]').on('switchChange.bootstrapSwitch', function (event, state) {
    if (state) {
      $("th.status").removeClass("columnHide");
      $("td.status").removeClass("columnHide");
      $("th.information").addClass("columnHide");
      $("td.information").addClass("columnHide");
      $("td#p1").attr('colspan', 4);
      $("td#p2").attr('colspan', 6);
      localStorage.setItem('columnControl', true);
    } else {
      $("th.status").addClass("columnHide");
      $("td.status").addClass("columnHide");
      $("th.information").removeClass("columnHide");
      $("td.information").removeClass("columnHide");
      $("td#p1").attr('colspan', 2);
      $("td#p2").attr('colspan', 3);
      localStorage.setItem('columnControl', false);
    }
  });
 var columnState = localStorage.getItem('columnControl'); //grab the localstorage value, if any
  if (columnState === null) { //does the localstorage value even exist?
    columnState = true //if localstorage value doesn't exist, set default values
  } 

  $('input[name="columnControl"]').bootstrapSwitch('setState', columnState);


</script>
}