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），則需要將開關設置爲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> 
} 

實際引導開關由一個全球性的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> 
}