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设置的状态为条件。如果为真或假，则交换机需要处于适当的设置，并且需要为列设置适当的类。如果没有localstorage内容（没有存储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>
}

Bootstrap Switch显示/隐藏表列 - 初始配置＆amp;价值储存

1 个答案: