Question

有谁知道如何设置jQuery移动列切换表，以便在用户加载页面时，默认情况下只有某些列可见？例如，列1-6可见，但列7不可见，必须使用列选择器按钮打开。

<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?将属性添加到您想隐藏的列中。

在表<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

jQuery移动表设置默认视图

1 个答案: