jQuery手機桌面設置默認視圖

Question

有誰知道如何設置jQuery移動列切換表，以便當用戶加載頁面時，只有某些列默認可見？例如，列1-6可見，但列7不可見，必須使用列選擇器按鈕打開。

這裏是我的project example

<thead> 
    <tr> 
     <th data-priority="1">Date</th> 
     <th>Client</th> 
     <th data-priority="2">Dates and Times Needed</th> 
     <th data-priority="3">Caregiver In Mind</th> 
     <th data-priority="4">Notes</th> 
     <th data-priority="5">Comunication</th> 
     <th data-priority="6">Unable Reason</th> <!-- Want this column to be hidden by default --> 
    </tr> 
    </thead> 

Answer 1

此功能沒有內置到窗口小部件，所以你必須自己編寫它。

這裏有一種方法：

它擴展了Omars回答這裏：How to set default value of Column-Toggle Table Widget for a column?將屬性添加到您想要隱藏的列（S）。

在表<thead>中爲首先應該隱藏的列添加新的數據屬性。在我的例子data-hiddendefault="true"：

<thead> 
    <tr> 
     <th data-priority="2">Date</th> 
     <th>Client</th> 
     <th data-priority="3">Dates and Times Needed</th> 
     <th data-priority="1">Caregiver In Mind</th> 
     <th data-priority="3">Notes</th> 
     <th data-priority="3">Comunication</th> 
     <th data-priority="3" data-hiddendefault="true">Unable Reason</th> 
    </tr> 
    </thead> 

然後添加腳本到tablecreate事件。我們首先獲得列切換彈出窗口的ID（表ID +'-popup'）。然後遍歷所有列標題並找到具有數據優先級的列標題，因爲這些列出現在列切換彈出窗口中。現在，請查看是否隱藏列的新屬性是存在的，如果是，設置它的複選框，在彈出來加以控制，刷新複選框控件，並觸發複選框的更改事件：

$('[data-mode="columntoggle"]').on('tablecreate', function(event, ui) { 
    var id = this.id + "-popup"; 
    var $cols = $(this).find("thead th"); 
    var idx = 0; 
    $cols.each(function(index){ 
     if ($(this).jqmData("priority")){     
      if ($(this).jqmData("hiddendefault") == true) { 
       $("#" + id + " [type=checkbox]:eq(" + idx + ")").prop("checked", false).checkboxradio("refresh").trigger("change"); 
      } 
      idx++; 
     } 
    }); 
}); 

這裏是你的更新FIDDLE