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

所以请注意:上面的方法确实有效，至少在显示和隐藏列方面是这样。

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

具体:

• 在页面加载时，我希望切换以本地存储设置的状态为条件。如果是 true 或 false，则开关需要处于适当的设置，并且需要为列设置适当的类。如果没有本地存储内容(没有存储 True 或 False)，我需要将开关设置为 ON(true)并设置某些类(默认情况)。
• 在表单提交(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>
}